Web storage allows, web applications to store data locally within the user’s browser. The storage is at least 5MB and information is never transferred to the server, unlike cookies. Web storage is per domain and protocol. All pages, from one origin, can store and access the same data.
Cookies
What Are Cookies?
Cookies are text files with small pieces of data (string), like a username and password. The HTTP cookie is what we currently use to manage our online experiences, by identifying specific users and improve your web browsing experience. It is also what some bad people can use to spy on your online activity and steal your personal info. In our blog we’re gonna concentrate on HTTP cookie.
Data stored in a cookie is created by the server upon your connection. This data is labeled with a unique sessionID to you and your computer. They are stored per domain, think of them as cookie buckets, for instance you visit example.com you will get a specific cookie for example.com, any cookies created while in example.com will go to the example.com bucket and so on. By default if you create cookie, it will only be accessible within the domain, and it will only be sent to the same domain. Cookies Properties Sent with each request to the server. When the cookie is exchanged between your computer and the network server, the server reads the sessionID and knows what information to specifically serve to you.
What Are Cookies Used For?
Session management:
For example, cookies let websites recognize users and recall their individual login information and preferences.
Personalisation:
Customized advertising is the main way cookies are used to personalize your sessions. You may view certain items or parts of a site, and cookies use this data to help build targeted ads that you might enjoy.
Tracking.
Shopping sites use cookies to track items users previously viewed, allowing the sites to suggest other goods they might like and keep items in shopping carts while they continue shopping.
Cookies Types
1. Session cookie: Once browser close they are “deleted”.
2. permanent cookie: Remain on a computer indefinitely, although many include an expiration date and are automatically removed when that date is reached.
3. httponly cookie: Cannot access it from the browser, protect you from hackers.
4. secure cookie: Ensures that data will only be transported over HTTPS.
5. First-party cookies: Are directly created by the website you are using.
6. Third party cookie: Are more troubling. They are generated by websites that are different from the web pages users are currently surfing, usually because they’re linked to ads on that page. Visiting a site with 5 ads may generate 5 cookies, even if users never click on those ads.
7. Zombie Cookies: Recreated even after users delete them, e-tags from the server Cookie Security.
Why Cookies Can Be Dangerous ?
1. Stealing cookies: Injecting XSS script.
2. Cross site request forgery: Making request on your behave using your cookie. Such example if you are signed in into your bank account and the bank website uses cookies to identify you, the hacker could inject a script that makes a call to your bank account without knowing your credentials.
LocalStorage
What is localStorage ?
LocalStorage is a property that allows JavaScript sites and apps to save key-value pairs in a web browser with no expiration date. This means the data stored in the browser will persist even after the browser window is closed. With local storage, no data is transferred between the client and the server (unless there’s code that explicitly does that). It’s great for reducing payload size. Cookies on the other hand, are transferred as HTTP header field with every request on the set domain. Users “shouldn’t” access local data and change it directly, but nothing is stopping them in doing so.
Is LocalStorage safe to use?
Developers have no control over the locally stored data:
With localstorage, there’s no server database over which the developer has control. Thus the developer cannot update code once it’s been stored. A user would need to either manually delete the file, or clear browser cache, thus lose all stored data.
cross site request forgery:
Storing something sensitive like a password in a local storage file actually simplifies the process for a hacker, because they won’t need to load the cookie into their own browser.
Do not store any sensitive data such as passwords or credit card numbers in local storage!
How to use LocalStorage ?
1// store a value
2localStorage.setItem( 'name', 'Xyass' );
3
4// retrieve a value
5localStorage.getItem( 'name' );
6
7// remove the value
8localStorage.removeItem( 'name' );
9
10// only string values can be stored so for objects, use JSON
11var info = {
12 job: 'developer',
13 author: 'Xyass'
14}
15localStorage.setItem( 'info', JSON.stringify( info ) );
16
17// and to retrieve
18var post = JSON.parse( localStorage.getItem( 'info' ) );SessionStorage
What is sessionStorage ?
SessionStorage stores data only for a session, if you have multiple tabs or window with the same URL, the browser creates a separate sessionStorage for each one, so the stored data in a browser tab cannot be accessible in another tab. SessionStorage will be deleted when the browser is closed. Also it’s only available when a page is requested from a server, since the data is tied to a server session,
When to use sessionStorage ?
Some cases when we can use sessionStorage:
— Store the state of an interface so that the user returns to the screen as it was when they left it.
— Share necessary user settings on each page, like layout or template.
— Action that you want the user to do it once per login.
How to use SessionStorage ?
1// Storing data in the sessionStorage
2sessionStorage.setItem( 'name', 'Xyass' );
3
4// retrieve a value
5sessionStorage.getItem( 'name' );
6
7// remove the value
8sessionStorage.removeItem( 'name' );
9
10// Deleting all items in the sessionStorage
11sessionStorage.clear();Conclusion
Clearly, if the data you are storing needs to be available on an ongoing basis then localStorage is preferable to sessionStorage — although you should note both can be cleared by the user so you should not rely on the continuing existence of data in either case. Also localStorage and sessionStorage are perfect for persisting non-sensitive data.
Here is a table which gives you a detailed comparison between the three:
