I have a form on my page with text boxes, radio buttons and drop down menus that ask questions about students. The options selected from these will later be used to make a div containing each student's content. My directions say to save the list to local storage. I'm confused on what exactly this means. I tried looking this up and cookies kept coming up. I thought these were 2 different things. I'm confused on the concept of local storage. I've searched this on Google and Stack and have read what ever I could find related to these topics. I think I need this explained in a simple way rather then reading a textbook definition or answers to questions people have asked about there code relating to cookies and local storage. Can someone explain these 2 topics? Are cookies and local storage the same things? I'm not sure if it's different for other languages but I'm using Javascript.
2 Answers
Cookies and localstorage are not the same things.
Cookies
Cookies are small files that contain information useful to a web site — such as password, preferences, browser, IP Address, date and time of visit, etc. Every time the user loads the website, the browser sends the cookie back to the server to notify the website of the user’s previous activity. Cookies have a certain life span defined by their creators and it expires after the fixed time span.
localStorage
The localStorage property allows you to access a Storage object for the Document's origin; the stored data is saved across browser sessions. That means it won't clear until you remove it. In another way, localStorage has no expiration time.
Add data to localStorage
localStorage.setItem('myCat', 'Tom');
Remove Item
localStorage.removeItem('myCat');
Remove all items
localStorage.clear();
Also, there is another thing called sessionStorage. Which is same as localStorage but data only stored until the browser session is closed.
localStorage is an API that the browser provides to allow you to read and write data. You can kind of imagine it as a single large JavaScript object, storing data values under different keys. Using it is easy: localStorage.setItem(key, value) (for some key and value, e.g. localStorage.setItem('test', 23)) to write a value and localStorage.getItem(key) to read/access that value. Details and examples can be found here
Cookies are accessed through the API document.cookie. document.cookie also uses pairs of keys and values (the cookies) to store data; however, the approach for reading and writing cookies is different. To create a new cookie, you enter document.cookie = "key=value" (for some key and value, e.g. document.cookie = "test=23"). To see all cookies, enter document.cookie, which will spit out all cookies as a string of keys and values, separated by semicolons (e.g. "test=23; someOtherKey=59"). Unfortunately, this makes reading cookie values a little trickier than with localStorage; the simplest way to get the value for a single key would be to use a Regular Expression, a specific pattern for matching text. More details and examples can be found here.
In terms of how you use them, they're similar in that they both are used for storing data. However, cookies are mainly sent to the browser from the server along with the page; localStorage, in contrast, is only accessible to the JavaScript code in the browser.
Hope this helps!
[EDIT]
Related