{"id":2462,"date":"2017-05-22T18:56:12","date_gmt":"2017-05-22T13:26:12","guid":{"rendered":"https:\/\/code4developers.com\/?p=2462"},"modified":"2023-10-16T23:24:20","modified_gmt":"2023-10-16T17:54:20","slug":"local-storage-session-storage","status":"publish","type":"post","link":"https:\/\/code4developers.com\/local-storage-session-storage\/","title":{"rendered":"Local Storage and Session Storage"},"content":{"rendered":"

What is local Storage?<\/h3>\n

local storage is property for accessing Storage<\/strong> object, which is used to store and retrieve data from user\u2019s browser. It is accessible only at client side not at server side like cookie.<\/p>\n

Data stored in localStorage is accessible thought all pages under same domain, until user does not delete it manually. Even though user closes the browser, data will be accessible next time.<\/p>\n

<\/p>\n

Syntax: <\/strong><\/h4>\n
Set local storage:\r\nlocalStorage.setItem('ProductName', 'Mobile');<\/pre>\n
localStrorage stores data in Key\/Value format. Same syntax can be written as<\/p>\n
localStorage.ProductName = 'Mobile';<\/pre>\n
Note: Here ProductName is key and Mobile is value for local storage. Key is case sensitive so here ProductName and productname will be considered as two different keys.<\/p>\n
Get local storage:<\/u><\/p>\n
var ProductName = localStorage.getItem('ProductName');<\/pre>\n
OR<\/p>\n
var ProductName = localStorage.ProductName;<\/pre>\n
localStorage will always return value in string. So if required, then one need to cast the value in needed type.<\/p>\n
Remove local storage:<\/u><\/p>\n
localStorage.removeItem('ProductName');<\/pre>\n
This will remove \u2018ProductName\u2019 from local storage of under current domain.<\/p>\n
localStorage.clear();<\/pre>\n
This will remove all the local storage for current domain.<\/p>\n
What is session Storage?<\/h3>\n
Session storage is almost same as local storage. Only difference is, session storage will get cleared once user will close the browser window.<\/p>\n
Syntax: <\/strong><\/p>\n
All the example written for localStorage can be used for sessionStorage as below<\/strong><\/p>\n
Set session storage:<\/u><\/p>\n
sessionStorage.setItem('ProductName', 'Mobile');<\/pre>\n
OR<\/p>\n
sessionStorage.ProductName = 'Mobile';<\/pre>\n
Get session storage:<\/u><\/p>\n
var ProductName = sessionStorage.getItem('ProductName');<\/pre>\n
OR<\/p>\n
var ProductName = sessionStorage.ProductName;<\/pre>\n
Remove session storage:<\/u><\/p>\n
sessionStorage.removeItem('ProductName');\r\n\r\nsessionStorage.clear();<\/pre>\n
Browser Support for Local Storage and Session Storage:<\/p>\n\n\n\n\n\n\n\n\n
Browser<\/strong><\/td>\nVersion<\/strong><\/td>\n<\/tr>\n
Chrome<\/td>\n4.0<\/td>\n<\/tr>\n
Firefox<\/td>\n3.5<\/td>\n<\/tr>\n
Internet Explorer<\/td>\n8.0<\/td>\n<\/tr>\n
Opera<\/td>\n10.50<\/td>\n<\/tr>\n
Safari<\/td>\n4.0<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Storage Capacity:<\/p>\n
Storage capacity for localStorage and sessionStorage is vary based on browser. Generally browsers provides around 5MB of storage space.<\/p>\n
Click Here<\/a>\u00a0to read more JavaScript articles on\u00a0Code4Developers<\/a>. If you are getting started with Angular then I recommend this\u00a0official documentation<\/a>\u00a0to refer.<\/p>\n","protected":false},"excerpt":{"rendered":"
What is local Storage? local storage is property for accessing Storage object, which is used to store and retrieve data from user\u2019s browser. It is accessible only at client side…<\/p>\n","protected":false},"author":4,"featured_media":3127,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[2],"tags":[22,23],"powerkit_post_featured":[],"class_list":{"0":"post-2462","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-javascript","8":"tag-javascript","9":"tag-storage"},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8NAi4-DI","jetpack-related-posts":[{"id":3321,"url":"https:\/\/code4developers.com\/spread-syntax-in-javascript\/","url_meta":{"origin":2462,"position":0},"title":"Spread syntax (three dots) in JavaScript","author":"Yatendrasinh Joddha","date":"March 21, 2018","format":false,"excerpt":"Spread syntax which is used by typing three dots (...) in JavaScript. It allows an array expression or string or anything which can be iterating to be expanded in places where zero or more arguments for function calls\u00a0or elements for array are expected. It can also be used for an\u2026","rel":"","context":"In "JavaScript"","block_context":{"text":"JavaScript","link":"https:\/\/code4developers.com\/category\/javascript\/"},"img":{"alt_text":"javascript","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":6955,"url":"https:\/\/code4developers.com\/transpiling-in-javascript\/","url_meta":{"origin":2462,"position":1},"title":"Transpiling in JavaScript","author":"Yatendrasinh Joddha","date":"April 29, 2020","format":false,"excerpt":"Transpiling is a term used for taking source code written in one language and converting or transforming it into another language. All the browsers does not support JavaScript code written in ES6. It is a big challenge for every new gen developers. Now converting this ES6 code to ES5 is\u2026","rel":"","context":"In "JavaScript"","block_context":{"text":"JavaScript","link":"https:\/\/code4developers.com\/category\/javascript\/"},"img":{"alt_text":"javascript","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":3119,"url":"https:\/\/code4developers.com\/difference-between-javascript-and-ecmascript\/","url_meta":{"origin":2462,"position":2},"title":"What\u2019s the difference between JavaScript and ECMAScript?","author":"Arif Khoja","date":"October 31, 2017","format":false,"excerpt":"I\u2019ve tried googling \u201cthe difference between JavaScript and ECMAScript.\u201d I ended up having to wade through a sea of ambiguous and seemingly conflicting results: \u201cECMAScript is a standard.\u201d \u201cJavaScript is a standard.\u201d \u201cECMAScript is a specification.\u201d \u201cJavaScript is an implementation of the ECMAScript standard.\u201d \u201cECMAScript is standardized JavaScript.\u201d \u201cECMAScript is\u2026","rel":"","context":"In "JavaScript"","block_context":{"text":"JavaScript","link":"https:\/\/code4developers.com\/category\/javascript\/"},"img":{"alt_text":"javascript","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":3194,"url":"https:\/\/code4developers.com\/react-hello-world-and-jsx\/","url_meta":{"origin":2462,"position":3},"title":"React: Hello World and JSX","author":"Arif Khoja","date":"January 8, 2018","format":false,"excerpt":"This is a typical Hello World implementation in React in JSX file. It shows one of two ways you can write components, and how you pass data to a components. import React, { Component } from 'react'; import ReactDOM from 'react-dom'; class App extends Component { render() { return (\u2026","rel":"","context":"In "React"","block_context":{"text":"React","link":"https:\/\/code4developers.com\/category\/react\/"},"img":{"alt_text":"react","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/12\/react_2.png?fit=375%2C375&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":5161,"url":"https:\/\/code4developers.com\/getting-started-with-google-maps-places-api\/","url_meta":{"origin":2462,"position":4},"title":"Getting started with Google Maps Places API","author":"Arif Khoja","date":"October 17, 2019","format":false,"excerpt":"If you want to get all of the restaurant data from a specific city by text search in your application, you have come to the right place. In this tutorial, you\u2019re going to learn how to do exactly that using Google Maps Places API. Also, I will be covering how\u2026","rel":"","context":"In "Cloud"","block_context":{"text":"Cloud","link":"https:\/\/code4developers.com\/category\/cloud\/"},"img":{"alt_text":"places-api","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2019\/10\/places-api.png?fit=1026%2C1200&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2019\/10\/places-api.png?fit=1026%2C1200&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2019\/10\/places-api.png?fit=1026%2C1200&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2019\/10\/places-api.png?fit=1026%2C1200&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":6553,"url":"https:\/\/code4developers.com\/cors-error-and-its-solutions\/","url_meta":{"origin":2462,"position":5},"title":"CORS Error And Its Solutions","author":"Arif Khoja","date":"March 15, 2020","format":false,"excerpt":"By the end of this short tutorial, you\u2019ll have a better understanding of: Why CORS error is occurring? What is CORS? and, Find a few ways to fix CORS error: Enable CORS Make an HTTP Request from a Server Use Proxy Server Let\u2019s say, you will need to make an\u2026","rel":"","context":"In "JavaScript"","block_context":{"text":"JavaScript","link":"https:\/\/code4developers.com\/category\/javascript\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/04\/cors-1.png?fit=375%2C210&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/2462","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/comments?post=2462"}],"version-history":[{"count":43,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/2462\/revisions"}],"predecessor-version":[{"id":14697,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/2462\/revisions\/14697"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/media\/3127"}],"wp:attachment":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/media?parent=2462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/categories?post=2462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/tags?post=2462"},{"taxonomy":"powerkit_post_featured","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/powerkit_post_featured?post=2462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}