diff --git a/week_10_angular_and_reviews/day_04_more_js/presentations/emmy_localStorage.md b/week_10_angular_and_reviews/day_04_more_js/presentations/emmy_localStorage.md index 59d9db6..e623e56 100644 --- a/week_10_angular_and_reviews/day_04_more_js/presentations/emmy_localStorage.md +++ b/week_10_angular_and_reviews/day_04_more_js/presentations/emmy_localStorage.md @@ -2,33 +2,35 @@ ##WHY Cookie limitations -Included in every HTTP request (slows down apps, less secure) -Limited amount of date +* Included in every HTTP request (slows down apps, less secure) +* Limited amount of date + We’re spoiled because this type of thing used to be a lot harder #youths ##WHAT Local storage offers more storage space, on the client side, that persists beyond a page refresh and isn’t transmitted to the server. + Unlike session storage, local storage stays after a browser is quit (aka is persistent). ##WHERE Where is all of this data going!? + You can view/delete local storage entries using some browsers. Here is a youtube demo with chrome. Essentially go Chrome > preferences > privacy > content settings > cookies > show cookies and other data. You see a list of cookies stored on your computer. ##HOW Mini-example: counting the number of times a user has visited a page -`

You have viewed this page an untold number of time(s).

` - -`` +

You have viewed this page an untold number of time(s).

` + + localStorage is a JavaScript object and an extension of Storage. (like sessionStorage) can think of it as an object of key-value pairs. @@ -45,8 +47,10 @@ localStorage["bar"] = foo; ``` Important: note that data is stored as strings. You can get around this using some JSON. + **have array ‘names’ you want to store** `localStorage[“names”] = JSON.stringify(names);` + **want to use it again** `var storedNames = JSON.parse(localStorage[“names"];` @@ -64,7 +68,7 @@ Alternative: Indexed Database API = api for key-value data management. uses tran ##USES A bit obvious, but... - if your page renders a lot of data (like a google map), can store the data locally on someone’s comp upon first page load. Then reloading the page will happen instantly. - Store form data if a user has made some entries but hasn’t submitted yet. - Maintain the state of a game even if browser is closed. - Know when it’s a user’s first visit to a site and render the page accordingly. +* if your page renders a lot of data (like a google map), can store the data locally on someone’s comp upon first page load. Then reloading the page will happen instantly. +* Store form data if a user has made some entries but hasn’t submitted yet. +* Maintain the state of a game even if browser is closed. +* Know when it’s a user’s first visit to a site and render the page accordingly.