You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
95 lines
2.1 KiB
95 lines
2.1 KiB
# 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"
|
|
|
|
|
|
|
|
1. Expand Local Storage and Session Storage
|
|
|
|
|
|
|
|
1. Click on one of the DBs to view its contents
|
|
|
|
|
|
|
|
## 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:
|
|
|
|
|
|
|
|
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']));
|
|
```
|
|
|
|
|
|
|
|
## 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'));
|
|
```
|