Teaching a New Browser Old Tricks

Up until today every time I pulled input from a user that input would only exist as long as the page was not refreshed.As soon I clicked the refresh button my code would swirl down into the sewer of code of unsaved data that exists in the DOM.

My mind was blown last week when i learned about the wizardry that is session storage and local storage. Your browser can remember data from refreshes and even browser accesses past.

WHAT IS SESSION STORAGE?
Each website has its own storage space where you can save information that you will need access for longer than just one refresh of the page. When you save data as session storage it persists (remains in storage) until you close the browser tab or window. (It will not be passed on to new tabs or windows). Once you close the tab it is deleted.

This might be useful for a simple game where you have a limited number of tries at a task and wanted to be able to refresh the page to set you back to the previous try or close the tab to entirely restart. It may also be helpful for a survey or other nonsensitive document, where you want to be able to keep the info you've already filled out and saved, but clear the rest with a refresh.

syntax for saving to session storage:
sessionStorage.variable = value;
(the value can be a number, string, array, or object that has been converted into a string).
to remove an item from session storage:
sessionStorage.removeItem("name of session Storage variable you want to remove");
to clear all out of local storage:
window.sessionStorage.clear();

to view session storage: 
in Chrome dev tools you can view what is stored in your session storage by going to the resources tab  at the top of the tools and then when you're in the resources tab, on the left side select Session Storage and you should be able to see the variables (keys) and their values that are being stored.

WHAT IS LOCAL STORAGE?
Local storage works much the same as session storage, except that data saved in localStorage persists until it is removed , either through dev tools console or through a script that is being run on the page. (ie closing tabs, refreshing browser, shutting down computer etc will not remove it, the browser must be told to remove the data.) Below the two variables test 1 were assigned. Once the browser was closed and reopened the local storage variable persisted, but the sessionStorage was cleared.

to view session storage: in Chrome dev tools you can view what is stored in your session storage by going to the resources tab  at the top of the tools and then when you're in the resources tab, on the left side select Session Storage and you should be able to see the variables (keys) and their values that are being stored.









JSON
*** Local storage and Session storage store all data as a string ***

So if you save a number to local storage it will be converted into a string, so if you were to try to add it to another number it would concatenate the string instead of actually preforming math...

the solution to this is to use JSON.stringify to convert the data into a string before you save it  and then use JSON.parse to convert it back to its original format so that you can work with it. (if you are only saving a single string, it is sufficient to just put the string in quotes without bringin JSON into it.

NOTE: you cannot stringify a function.

read more about JSON.

GET YOUR HANDS DIRTY:
-try this go to your browser and open the dev tools on an empty page and type localStorage.bgColor = "red."
-Then refresh the page and type localStorage.bgColor ... it will console log red... because it remembers.
-Now that variable bg.Color will be red until it is changed manually OR until code for that page is run that changes it.
- If you link a javascript file to your index page and just type:
document.body.style.backgroundColor = localStorage.bgColor;
then refresh your browser, BAM! Your page is now a sexy fire engine red.