web storage

data stored in your browser

In the web storage,

data is saved in key / value pairs

localstorage

Data is saved until the user removes the data by hand or uninstalls the browser.

sessionstorage

Data is saved until the tab or window is closed.

–Stores up to 5 MB of data in your browser.

–Data is stored as text (type: string).

–Each domain (ju.se, bbc.co.uk) have access to it's own web storage.

// Create/Write data to a localStorage key

window.localStorage.setItem("userColor", "#efefef")
//                              key        value


// Read data from a localStorage key
window.localStorage.getItem("userColor")
//                              key


// Delete one localStorage key
window.localStorage.removeItem("userColor")
//                                 key


// Delete all localStorage keys
window.localStorage.clear()

// See how many keys there are in localStorage
window.localStorage.length

swap localStorage for sessionStorage if you don't want save the data long term

a handy shortcut

think of it as adding properties to an object

// Write to a localStorage key
localStorage.userColor = "#efefef"
//               key       value


//Read from a localStorage key
alert(localStorage.userColor)

demo

limitations

localStorage and sessionStorage

can only store strings

localStorage.numbers = 3.141592
// "3.141592"

localStorage.arrays = ["apple", "banana"]
// "apple,banana"

localStorage.objects = {answer:42, drink:"coffee"}
// "[object Object]"

JSON

JavaScript Object Notation

JSON.stringify(myObj) // '{"foo":"bar","baz":42}'

JSON.parse(myJson) // {foo: "bar", baz: 42}