storage

html5/storage.md

@@ -0,0 +1,94 @@
+# Web Storage
+
+## Lesson Objectives
+
+1. Describe web storage
+1. Differentiate between localStorage and sessionStorage
+1. View storage in dev tools
+1. Set an item
+1. Get an item
+1. Remove an item
+1. Clear the storage
+1. Store objects/arrays
+1. Retrieve objects/arrays
+
+## Describe web storage
+
+Web storage is like cookies, but it doesn't get transmitted to the server.  It's more secure, more performant, and the storage limit is larger (5MB per origin).
+
+The format is key value pairs, both of which are strings
+
+## Differentiate between localStorage and sessionStorage
+
+- localStorage lives on until deleted
+- sessionStorage ends when the user closes the window
+
+## View storage in dev tools
+
+1. Open up dev tools and click on "Application"
+
+    ![](https://i.imgur.com/96hed8l.png)
+
+1. Expand Local Storage and Session Storage
+
+    ![](https://i.imgur.com/e2tgdO3.png)
+
+1. Click on one of the DBs to view its contents
+
+    ![](https://i.imgur.com/HZiwigZ.png)
+
+## Set an item
+
+```javascript
+localStorage.setItem('foo', 'bar');
+sessionStorage.setItem('age', 2); //note this will be converted to a string
+```
+
+## Get an item
+
+```javascript
+localStorage.getItem('foo'); //'bar'
+sessionStorage.getItem('age'); //2 - note this is a string, even though, it was set as a number
+```
+
+## Remove an item
+
+```javascript
+localStorage.removeItem('foo');
+sessionStorage.removeItem('age');
+```
+
+## Clear the storage
+
+```javascript
+localStorage.clear();
+sessionStorage.clear();
+```
+
+## Store objects/arrays
+
+```javascript
+localStorage.setItem('myObj', {foo:'bar'});
+```
+
+This doesn't work:
+
+![](https://i.imgur.com/3BgVNj9.png)
+
+Instead you have to convert objects and arrays into strings:
+
+```javascript
+localStorage.setItem('myObj', JSON.stringify({foo:'bar'}));
+localStorage.setItem('myArray', JSON.stringify([1,2,'apple']));
+```
+
+![](https://i.imgur.com/LfnErPb.png)
+
+## Retrieve objects/arrays
+
+After, `JSON.stringify()`, the arrays/objects are stored in local/session storage as strings.  To get them back into variables, use `JSON.parse()`:
+
+```javascript
+const myObj = JSON.parse(localStorage.getItem('myObj'));
+const myArray = JSON.parse(localStorage.getItem('myArray'));
+```