Original subtitles

1 1

So, as I mentioned, 2

2

by the end of the last lecture. 3

3

In this one, we will now make the bookmarks data persist 4

4

across page loads. 5

5

And for that, we're gonna use local storage. 6

6

And once again, this will now become quite easy, 7

7

and quite straightforward, 8

8

because we already have our entire project structure 9

9

so nicely set up. 10

10

So storing data in local storage 11

11

is of course all about data. 12

12

And so that will have to be implemented here in the model. 13

13

So let's actually take a look here at our flow chart again. 14

14

And so now this is all about loading bookmarks 15

15

from local storage and storing bookmarks to local storage. 16

16

So when should the bookmarks be stored to local storage? 17

17

Well, that happens whenever the user 18

18

bookmarks a recipe. 19

19

And of course that also when the user 20

20

unbookmarks the recipe. 21

21

So in either of these cases, 22

22

the current bookmarks array 23

23

basically needs to be stored to local storage. 24

24

Okay, so what I just said, 25

25

is that whenever we add a bookmark or delete a bookmark, 26

26

we need to persist that data. 27

27

And so let's add a function here, 28

28

which we can then call in these two functions. 29

29

So this one we don't need to export 30

30

because we simply will call it in these other two functions. 31

31

So persist, bookmarks. 32

32

And then here, remember, 33

33

all we have to do is local storage.setItem. 34

34

Then here we can give that item a name. 35

35

So that's bookmarks. 36

36

And then here, we need to set a string. 37

37

And we do that by calling Json.stringify 38

38

and then with the object 39

39

that we basically want to convert to a string. 40

40

And so that is state.bookmarks, 41

41

and that's actually it. 42

42

Now, all we have to do is to call this function 43

43

in these two places. 44

44

And that's already the first step 45

45

and we can actually try that out already. 46

46

So at least seeing it in the console. 47

47

So let's bookmark this one and also this Greek pasta salad. 48

48

Right, so both of them are now here 49

49

and let's come here to application and then local storage. 50

50

And so here it is already. 51

51

So here are the bookmarks with these two recipes 52

52

that we just stored. 53

53

And now, as I reload the page, 54

54

you see that the data is still here. 55

55

Now, of course it is not yet back here. 56

56

So just because the data is still in local storage, 57

57

doesn't mean that it's magically gonna show up here 58

58

because we didn't write any code for that yet, 59

59

but let's now actually go do that. 60

60

So basically when the page is loaded, 61

61

we then want to run a method 62

62

which will basically render the bookmarks here. 63

63

All right. 64

64

So the first step in doing that, 65

65

is to actually get the bookmarks out of the local storage 66

66

and back into our code. 67

67

And then after that, we can then as I just said, 68

68

render them back here to this bookmarks view, okay? 69

69

So we have to code for persisting. 70

70

So for storing the bookmarks in local storage here, 71

71

so let's now also have to code for taking them out 72

72

also right here. 73

73

And let me simply write an initialization function here. 74

74

So an init function, 75

75

and then right at the beginning, 76

76

I will call that init function. 77

77

And here, of course, missing the function keyword. 78

78

And so here we need to do the opposite. 79

79

So LocalStorage.getItem, 80

80

and then remember it is called bookmarks. 81

81

And then we also need to store that somewhere 82

82

and I'm not storing it directly into our state, 83

83

because this data might not be defined actually. 84

84

So we might have nothing of course, in the storage. 85

85

And so only if there is storage, 86

86

then we want state.bookmarks to be 87

87

Json.parse, 88

88

which is basically to convert the string back to an object. 89

89

And so here we are now calling this function 90

90

right in the beginning and then 91

91

just to see let's then immediately log state.bookmarks 92

92

to the console. 93

93

Okay, so here we have a lot of logs. 94

94

So let's go here to line 11 of these two 95

95

and line 114 of the model. 96

96

So model, now this one actually, 97

97

is the one that I just did, 98

98

but here we apparently have some console dot logs 99

99

that we don't need. 100

100

So here and here, 101

101

and in fact, let's close these here 102

102

and actually all of them for now. 103

103

And so here, right? 104

104

Immediately we have the local storage. 105

105

Now, for some reason, this recipe was not find let's reload. 106

106

Well, that's weird. 107

107

And apparently we broke something in our code, 108

108

but let's worry about that in a second. 109

109

So for now, what matters here, 110

110

is that we actually got the data back from local storage. 111

111

So let's see if this has anything to do with the code 112

112

that we just wrote here. 113

113

Well, that's very weird. 114

114

So now it is back to working for some reason. 115

115

So let's actually log the error 116

116

that is actually happening to the console. 117

117

So here let's set that back to cause that error, 118

118

but then here in the controller, 119

119

so the one that is responsible for loading the recipe. 120

120

So here, right now, 121

121

we are only rendering the error to the user interface, 122

122

and we are doing that with this nicely formatted error 123

123

that we defined in the recipe view. 124

124

But so let's not actually also log the error itself 125

125

in the console so that we can see 126

126

what is actually happening. 127

127

So console error with error. 128

128

And so now we get text content of undefined 129

129

coming from controller at line 34. 130

130

Okay, that's just the log. 131

131

And so here we have a stack trace. 132

132

And so the error itself is originating in line 25. 133

133

So it is here when we update the bookmarks view. 134

134

Okay, so this is where the error basically comes from. 135

135

And so this is how we use this so-called stack trace. 136

136

So here we can then follow exactly what happens. 137

137

So here we then need to go to view 27, 138

138

which is where this update is defined 10 for each 139

139

and then line 37. 140

140

So line 37 in the view, 141

141

and so that is right here. 142

142

So some kind of problem 143

143

with updating the bookmarks view. 144

144

So apparently we're trying to set the text content 145

145

on some element here that doesn't yet exist. 146

146

So maybe we are simply calling this method here 147

147

a little bit too soon. 148

148

So that's moved out here to the end. 149

149

So updating a bookmark's view. 150

150

So we still have an error. 151

151

So this might be a good time to use the debugger. 152

152

And I hope that with this, we will be able to find the bug. 153

153

And if you're not interested in watching me find this bug 154

154

and please feel free to jump to some later point 155

155

in the code. 156

156

So you see that at this point, 157

157

the recipe has actually loaded. 158

158

Okay, and so now here we are at the debugger. 159

159

And so let's now go to the next step, 160

160

which is this one here. 161

161

Then we go into bookmarks view.update. 162

162

And at this point, the data here, 163

163

is actually already the data that is coming 164

164

from our local storage, right? 165

165

So this bookmarks here is at this point already loaded. 166

166

So right here we do that right at the beginning. 167

167

And so therefore the bookmarks, 168

168

so model.state.bookmarks here is already defined. 169

169

So that's these two objects right there. 170

170

Let's actually see the scope here. 171

171

And so indeed that's these two recipe objects, right? 172

172

So here we also have the entire call stack. 173

173

Okay, now let's keep going. 174

174

So the new markup, 175

175

then here we go through all of this. 176

176

Okay, once again, 177

177

all right, so here we are back. 178

178

Whoa, what's that? 179

179

Ah, so I just hovered over the string, 180

180

which has all of this. 181

181

So that's this markup that we just generated 182

182

then here let's generate this dam, okay? 183

183

And here are the new elements and the current elements. 184

184

So right now here, inside the current elements, 185

185

let's see what that is. 186

186

So that's all of the elements 187

187

that are basically right now 188

188

in that empty bookmarks panel, right? 189

189

Now, and do you see that the length of this one here is five 190

190

and this one here is 14. 191

191

And so I think I'm starting to see the problem here. 192

192

So these two arrays are the arrays 193

193

that we are basically comparing here, right? 194

194

So we have this hole for each loop 195

195

to compare the elements in these two arrays, right? 196

196

Because the goal of this method is to not add new elements, 197

197

but only to replace some text and elements 198

198

that already exist. 199

199

However, right now this bookmarks here is still empty. 200

200

And what does update here is trying to do, 201

201

is to now insert the data in there. 202

202

And so that should not happen, okay? 203

203

And so I'll actually quit this now, 204

204

by going back here, 205

205

getting rid of this and simply reloading. 206

206

So let's get this down. 207

207

And so in order to prevent this, 208

208

the first thing that we need to do now on the page 209

209

is basically render the bookmarks 210

210

and remember that's what happened 211

211

right at the beginning when we load the page. 212

212

So let's go to the bookmarks view 213

213

and here create a new handler. 214

214

So add handler render, 215

215

which receives an handler, 216

216

and then window.addeventlistener and load. 217

217

And then we will immediately call this handler. 218

218

Okay, and so here, 219

219

we already imported it. 220

220

And so here at the very end, 221

221

let's create then the handler function. 222

222

So the controller control and bookmarks, 223

223

and then all that we will do 224

224

is actually take bookmarksview.render 225

225

with state.bookmarks. 226

226

And again, that is actually model.state. 227

227

And now let's ask the first of all thing here, 228

228

do bookmarks view.addhandlerrender 229

229

with the control bookmarks? 230

230

And so now we are back to working 231

231

and the two bookmarks from before are now actually here. 232

232

All right, so with that we solved the problem, 233

233

because now as the page here tries to then 234

234

updating the bookmarks view, 235

235

the bookmarks are already there. 236

236

And so then there's nothing to update really. 237

237

So we can actually move that back up here, I believe 238

238

actually this one as well. 239

239

So let's try that again. 240

240

And yeah, so this is a bit of a more, 241

241

a natural order 242

242

now, okay. 243

243

And so now of course I can click here 244

244

and then this gets selected 245

245

and everything keeps working the same. 246

246

So we don't even need to search functionality 247

247

to be able to switch between our recipes. 248

248

And of course, if we unbookmark, 249

249

then that is gone, and as we reload the page, 250

250

then we only have this one, 251

251

then let's remove all of them. 252

252

And then as this was re-rendered, right? 253

253

Then we got this error message here back. 254

254

And of course, if we reload now, 255

255

then we have no bookmarks at all, again. 256

256

Now just to finish, 257

257

let's quickly add like a quick function here for debugging. 258

258

Let's call it clear bookmarks, 259

259

which is simply a function that at some point 260

260

we might want to call, 261

261

but again, only during development, 262

262

so clear 10 bookmarks. 263

263

So when I'm working with this, 264

264

then sometimes I need to do this. 265

265

So clearing all the bookmarks. 266

266

So let me add a couple of ones here. 267

267

So this one and this one. 268

268

Okay, and now as they reload the page, 269

269

it should then clear all of them. 270

270

Well, it didn't for some reason. 271

271

Oh, and that's probably 272

272

because this one here happened first, 273

273

so let's take this one out, do that again. 274

274

And now the bookmarks are gone. 275

275

Okay, but by default, 276

276

this will, of course be turned off 277

277

because otherwise our application is not going to work. 278

278

So here is the hot pizza dip. 279

279

And it is still bookmarked after we reload the application. 280

280

And so let's quickly to finish, 281

281

check out our flow chart, 282

282

but I'm pretty confident that everything is implemented. 283

283

So when the user clicks a bookmark, 284

284

it will then mark the selected bookmark here. 285

285

And of course it will render the recipe. 286

286

When the page loads, 287

287

then the bookmarks are loaded from local storage 288

288

and they are rendered. 289

289

So check here as well. 290

290

And when the user bookmarks a recipe, 291

291

then it gets stored to local storage. 292

292

So check here as well. 293

293

And so we just implemented all of this 294

294

or rather complex part. 295

295

So now it's finally time to take a break 296

296

and take an overview of what we need to implement next 297

297

in order to finish this application.