2a:null 2b:["$","title",null,{"children":"Storing Data Client-Side | Steve Oney | Observable"}] 30:T714,md` ## \`localStorage\` and \`sessionStorage\` [\`localStorage\`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) and [\`sessionStorage\`](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage) are part of [the Web Storage API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API) (a set of mechanisms that allow sites to store data on the client's computer). Both \`localStorage\` and \`sessionStorage\` work similarly---websites can store data in key/value pairs. JavaScript code can perform operations like setting a new key/value pair or looking up the value associated with a key. The key difference between \`localStorage\` and \`sessionStorage\` is that data stored in \`localStorage\` **will persist even after the browser window is refreshed or closed** whereas data stored in \`sessionStorage\` will be forgotten once the user closes the page. Further, data stored in \`localStorage\` propagates across multiple page instances (if the user has the same page open in multiple tabs or windows). ### Methods and Attributes: 1. [\`.setItem(keyName, keyValue)\`](https://developer.mozilla.org/en-US/docs/Web/API/Storage/setItem): Add a new key/value pair 2. [\`.getItem(keyName)\`](https://developer.mozilla.org/en-US/docs/Web/API/Storage/getItem): Get the value associated with a key 3. [\`.removeItem(keyName)\`](https://developer.mozilla.org/en-US/docs/Web/API/Storage/removeItem): Remove a key/value pair 4. [\`.clear()\`](https://developer.mozilla.org/en-US/docs/Web/API/Storage/clear): Remove every key/value pair 5. [\`.length\`](https://developer.mozilla.org/en-US/docs/Web/API/Storage/length): Get the number of key/value pairs 6. [\`.key(index)\`](https://developer.mozilla.org/en-US/docs/Web/API/Storage/key): Get the key at a given index `31:T8c3,md` ### 1. \`.setItem(keyName, value)\` \`.setItem(keyName, value)\` adds a new key/value pair to storage. The key of setItem can be referenced later to fetch the value attached to it. **Both the key and value must be a string**. If they are not, they will automatically be converted to a string. If you want to store a non-string, use [\`JSON.stringify()\`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) to convert the value to a JSON-formatted string (and then call [\`JSON.parse()\`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse) when you retrieve the value). Syntax: \`localStorage.setItem("key", "value");\`

#### Viewing Local Storage in your Browser: For Chrome: Open inspection tool -> Application -> Storage -> Local Storage For FireFox: Open inspection -> Storage -> Local Storage ### 2. \`.getItem(keyName)\` \`.getItem(keyName)\` returns the value associated with a key. If the value that you stored is a JSON-formatted string, you might want to call [\`JSON.parse()\`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse) to convert it back to a copy of the original object. Syntax: \`localStorage.getItem("key");\`

### 3. \`.removeItem(keyName)\` \`.removeItem(keyName)\` deletes a key/value pair. Syntax: \`localStorage.removeItem("key");\`

### 4. \`.clear()\` \`.clear()\` removes all the key/value pairs stored. Syntax: \`localStorage.clear();\`

### 5 + 6. \`.length\` and \`.key(index)\` We can get the number of key/value pairs through the \`.length\` attribute. We can then get the key at a given index with \`localStorage.key(index)\`. Syntax: \`localStorage.key(index);\`

`32:T7dd,md` ## Using JSON to Store Things Other than Strings We often want to store things other than strings. In order to do that, we can use [JSON (the JavaScript Object Notation)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON). For example, suppose we wanted to store the object \`{x: 1, y: 2}\`. If we ran: \`\`\`JavaScript const val = {x: 1, y: 2}; localStorage.setItem('data', val); console.log(localStorage.getItem('data')); // logs [object Object] \`\`\` Then our code would log \`[object Object]\` because when JavaScript naively converts \`{x: 1, y: 2}\` to a string (essentially using the [\`String\`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) constructor), the string it returns is \`'[object Object]'\` so that's what gets stored. Instead, if we want to store the actual object, we can convert it to a JSON-formatted string using [\`JSON.stringify()\`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify): \`\`\`JavaScript const val2 = {x: 1, y: 2}; localStorage.setItem('data', JSON.stringify(val2)); \`\`\` Then, we can call [\`JSON.parse()\`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse) to get the data back out: \`\`\`JavaScript const reconstructed_val2 = JSON.parse(localStorage.getItem('data')); console.log(reconstructed_val2); // logs Object { x: 1, y: 2 } \`\`\` However, note that the object that we get back is a **copy** of the original object. \`\`\`JavaScript val2 !== reconstructed_val2; // val2 and reconstructed_val2 are not the exact same object; mutating one does not change the other \`\`\` *Note: JSON does not work in every scenario. For example, JSON cannot (by default) stringify functions or data that has [circular references](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify#issue_with_json.stringify_when_serializing_circular_references)* `33:T59a,md` ## Cookies [Cookies](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies) are another way for websites to store data. HTTP (or at least earlier versions of HTTP) is a "stateless" protocol, meaning that there is no built-in notion of a memory. Instead, cookies typically are used as a "memory". Web servers ask clients to store cookies and these cookies get sent back to the web server when the client makes a new request. JavaScript has some functionality for [reading and writing cookies](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/cookies): ### Add a Cookie: \`document.cookie = "key=value";\`

### Delete a Cookie Since cookies have an expiration time, we can simply set an expiration time for the cookie and it will self-delete after the time. \`document.cookie = "class = SI579; expires=Mon, 18 Mar 2021 12:00:00 UTC";\` ## Local Storage VS Session Storage VS Cookies Cookies are typically used in situations where we want to communicate the cookie data with the server, whereas \`localStorage\` and \`sessionStorage\` data is more typically used only client-side.

[(Credit: W3School)](https://www.w3schools.com/js/js_cookies.asp). [(Image credit: Web Dev Simplified)](https://www.youtube.com/watch?v=GihQAC1I39Q). `34:T5df,md` ## Polyfills for the \`localStorage\` API ### What is Polyfill A polyfill is a piece of code used to provide modern functionality on older browsers that do not natively support it. ### Why do we need Polyfill for localStorage Some older browsers (like IE6 or IE7) don't support using localStorage, in this case, we can use polyfills that allow functionality expect to work in modern browsers like localStorage to work in older browsers. Picture [reference](https://caniuse.com/?search=localstorage).

#### Why don't we use Polyfill all the time The reason why polyfills are not used exclusively is for better functionality and better performance. Native implementations of APIs can do more and are faster than polyfills. Reference from [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Glossary/Polyfill) ### How to use polyfills for LocalStorage There are many polyfills for the local storage and session storage APIs. One such is [localstorage-polyfill](https://www.npmjs.com/package/localstorage-polyfill), which we can install with: \`\`\` npm i localstorage-polyfill \`\`\` \`\`\`JavaScript require('localstorage-polyfill'); // or import 'localstorage-polyfill' global.localStorage \`\`\` Other libraries can also serve as polyfills while adding additional functionality. For example [store.js](https://github.com/marcuswestin/store.js/) is a popular library that is built on \`localStorage\`. `35:T855,md` ## The GDPR and Storage You've probably seen privacy notices on websites, like this one on StackOverflow:

Many of these privacy notices are the result of the EU's [General Data Protection Regulation (GDPR)](https://gdpr-info.eu/), which sets limitations and guidelines for what companies can do with the personal information of EU citizens. Because the GDPR applies whether or not the site is hosted in the EU (and regardless of whether the visitor is actually visiting form the EU or not), every site that attracts European visitors must adhere to the GDPR. Part of the GDPR specifies that **users must consent to sites storing their data** (unless storing that data is critical to the service that the site provides): > Member States shall ensure that the storing of information, or the gaining of access to information already stored, in the terminal equipment of a subscriber or user is only allowed on condition that the subscriber or user concerned has given his or her consent, having been provided with clear and comprehensive information, in accordance with Directive 95/46/EC, inter alia, about the purposes of the processing. This shall not prevent any technical storage or access for the sole purpose of carrying out the transmission of a communication over an electronic communications network, or as strictly necessary in order for the provider of an information society service explicitly requested by the subscriber or user to provide the service. [Credit: StackExchange Law](https://law.stackexchange.com/questions/30739/do-the-gdpr-and-cookie-law-regulations-apply-to-localstorage) This is why we see warnings, particularly when third-party cookies (cookies that are associated with sites other than the primary site...typically advertisers) are used. For example, look at [Stack Exchange's Cookie Policy](https://stackoverflow.com/legal/cookie-policy). It breaks down which cookies are strictly necessary and which ones are 1st party vs 3rd party. Local storage **can** be subject to the GDPR, depending on how you use it. `36:[{"id":"6cfc81d1e430f67a57ed7e0ede3d8d4113e78b0eac104d6e9483510cc05bdd7b289af70375fac7dccff0cd7f88b42a0ce258e9bdf857259b39a5d086d4101acc","href":"https://static.observableusercontent.com/files/6cfc81d1e430f67a57ed7e0ede3d8d4113e78b0eac104d6e9483510cc05bdd7b289af70375fac7dccff0cd7f88b42a0ce258e9bdf857259b39a5d086d4101acc","name":"image@4.png","type":"image/png","lastModified":1616617037363.917,"size":269364},{"id":"93a276b23f41bbdc2664d88927c08e22f7321dd286116e4b300bae51de1d79907f64908bdc40327dcc16359f5b00e15b7698c1e721be7b999ee21a500079c1c9","href":"https://static.observableusercontent.com/files/93a276b23f41bbdc2664d88927c08e22f7321dd286116e4b300bae51de1d79907f64908bdc40327dcc16359f5b00e15b7698c1e721be7b999ee21a500079c1c9","name":"image@3.png","type":"image/png","lastModified":1616617037363.917,"size":155899},{"id":"dc469a1b406289a30b850855a0723571532acac96657fc51cd62124e653f5d3a63e1c5a318712bd074869e8ad412f8781884fde24cdddb638fc92ea4fecd3d99","href":"https://static.observableusercontent.com/files/dc469a1b406289a30b850855a0723571532acac96657fc51cd62124e653f5d3a63e1c5a318712bd074869e8ad412f8781884fde24cdddb638fc92ea4fecd3d99","name":"image@2.png","type":"image/png","lastModified":1616617037363.917,"size":240265},{"id":"cdcea1639d7285aa70c51eac67dd1a0ce30e738210f394a4b99ab08fe3e0df8bf97b7252a3eeea8b8af23877ebf20a4ad84e9e63b6c3ca536857dabc976e12d3","href":"https://static.observableusercontent.com/files/cdcea1639d7285aa70c51eac67dd1a0ce30e738210f394a4b99ab08fe3e0df8bf97b7252a3eeea8b8af23877ebf20a4ad84e9e63b6c3ca536857dabc976e12d3","name":"image@11.png","type":"image/png","lastModified":1616617037363.917,"size":109705},{"id":"9bb8dc348bb767d36d2161919ab1764aaf9ffea866c97802ea670718455c209b96e57dcc39f593579e9d56f66fc0980bfcd664d41b0b17d371110d43b1bee6b9","href":"https://static.observableusercontent.com/files/9bb8dc348bb767d36d2161919ab1764aaf9ffea866c97802ea670718455c209b96e57dcc39f593579e9d56f66fc0980bfcd664d41b0b17d371110d43b1bee6b9","name":"image@10.png","type":"image/png","lastModified":1616617037363.917,"size":376743},{"id":"cb5bbe65f32cf530eae480858b7afb7e935cc4f41edc4028d1bc9888bb67b38bc5d6d910c9cef3d747f82afd8231bd31defb45af6a3ce85518deade60ff5c795","href":"https://static.observableusercontent.com/files/cb5bbe65f32cf530eae480858b7afb7e935cc4f41edc4028d1bc9888bb67b38bc5d6d910c9cef3d747f82afd8231bd31defb45af6a3ce85518deade60ff5c795","name":"image@1.png","type":"image/png","lastModified":1616617037363.917,"size":245776},{"id":"28ba24b158ff27346d39afac6e16d4c7d4d60ea8a66ea4d41ca0ed1c9cfdfa596ff93652d0746d9064debcad3cc7ab45a7d392c6a163c966170872c65c3be144","href":"https://static.observableusercontent.com/files/28ba24b158ff27346d39afac6e16d4c7d4d60ea8a66ea4d41ca0ed1c9cfdfa596ff93652d0746d9064debcad3cc7ab45a7d392c6a163c966170872c65c3be144","name":"cookies.png","type":"image/png","lastModified":1617204228683.406,"size":34941},{"id":"77f977c68db6bd085682febeae51d427342f3eeeb670e4473cbc2954d46d8032bbd27f593ae7dba64de5110318e2d81e308a8a10ab8bf23202e88ca2695c7161","href":"https://static.observableusercontent.com/files/77f977c68db6bd085682febeae51d427342f3eeeb670e4473cbc2954d46d8032bbd27f593ae7dba64de5110318e2d81e308a8a10ab8bf23202e88ca2695c7161","name":"image@7.png","type":"image/png","lastModified":1616617037363.917,"size":246309},{"id":"d7c4eebde0760a4afc85c36058840734f8a33bb50d94bb73293a276c84ba7deb99df04638dfdc0ec3b709e2aed4198b1a9ea566d082a02ab0f826519939d9316","href":"https://static.observableusercontent.com/files/d7c4eebde0760a4afc85c36058840734f8a33bb50d94bb73293a276c84ba7deb99df04638dfdc0ec3b709e2aed4198b1a9ea566d082a02ab0f826519939d9316","name":"image@6.png","type":"image/png","lastModified":1616617037363.917,"size":246376},{"id":"6af3c9217442d0e59512577eeb66a1849c2181c040d5ac500d4e526d1f2d5c2af94f983a4fec9760721fb01d22700d636db0c2fe7f2514b733384dde525c7423","href":"https://static.observableusercontent.com/files/6af3c9217442d0e59512577eeb66a1849c2181c040d5ac500d4e526d1f2d5c2af94f983a4fec9760721fb01d22700d636db0c2fe7f2514b733384dde525c7423","name":"image@5.png","type":"image/png","lastModified":1616617037363.917,"size":194403}] 2e:{"id":"5f6b3d90eee71a97","slug":"si-579-storing-data-client-side","title":"Storing Data Client-Side","thumbnail":"1bec426e1c393f575cbbc704684130c3923efe05cca6fc950c767bd8d578d7a1","access_level":"public","create_time":"$D2021-03-17T20:22:15.361Z","update_time":"$D2023-10-02T17:43:47.888Z","view_time":null,"first_public_time":"$D2021-03-17T20:22:18.073Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"55b87b37da07de37","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":"starter_2024"},"version":87,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1d138075b46297f1","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":null}],"members":[{"type":"individual","id":"1d138075b46297f1","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":{"id":"8fc582aae7c4b049","slug":"si-579","title":"Building Interactive Applications","owner":{"id":"55b87b37da07de37","login":"soney","name":"Steve Oney"}},"type":"notebook","body":{"title":"Storing Data Client-Side","cells":[{"id":0,"value":"md`# Storing Data Client-Side`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":74,"value":"toc()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"md`\nBy default, when the user closes their browser, we lose all of the variable values and state information that we set in JavaScript. We can use client-side storage to save the information we care about.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":81,"value":"md`\n## Storage Change Events\n\nThe [\\`storage\\` event](https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event) fires when **a different document** modified \\`localStorage\\`. We can listen to this event by running:\n\n\\`\\`\\`JavaScript\nwindow.addEventListener('storage', (event) => {\n console.log('localStorage was modified on a different browser!');\n});\n\\`\\`\\`\n\nNote that the \\`event\\` parameter is a [\\`StorageEvent\\`](https://developer.mozilla.org/en-US/docs/Web/API/StorageEvent) instance with information about what changed.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":53,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":77,"value":"import {toc} from \"@harrystevens/toc\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 2f:"$2e:body"