Published on 2021-07-28, by Javed Shaikh
Before storage object mechanism, Cookies were used to store name-value pair data on client’s web browser. However, there are few drawbacks of using cookie like
World Wide Web Consortium or W3C introduced two storage object mechanisms to resolve such constraints which are localStorage and sessionStorage objects. These storage objects can store up to 5MB of data on client’s browser in terms of key-value pair string data. These key-value pair strings are mostly known as data items. Both storage objects work same way except one minor change in the way they store data items. The data saved on localStorage object can persist even after browser window is closed, but sessionStorage can hold only ephemeral data, meaning data will be lost once browser window is closed.
Both storage objects support similar methods to set and retrieve key value pair data items.
NOTE: Both key and value are stored as strings data type only.
This method is used to create a new key value pair data item or update the existing data item if same key is already present in the storage object
Example:
localStorage.setItem(“theme”,”light”);
//or
localStorage.theme = “light”;
I have used localStorage with exactly same key value pair data item to implement this blog’s theme preference. If you go to JavaScript console of this page and type localStorage and hit ENTER, you can see the theme data item as shown in below image.
This method is used to retrieve value of a key value pair data item. It takes key of the data item as an argument and returns its string value.
Example:
Let theme = localStorage.getItem(“theme”);
This method is used to delete a key value pair data item. It takes key as an input argument and removes that specific key along with its value. If the key does not exist, then it won’t do anything.
Example:
localStorage.removeItem(“theme”);
//The item with key “theme” should not be in the storage anymore
console.log(localStorage);
This method is used to delete all the data items from localStorage. Use this method carefully as it will erase all the key-value pair from the storage object.
Example:
localStorage.clear() // all the items will be deleted
This method takes index as an argument and returns its corresponding key.
//lets create a new item user
localStorage.setItem("user","abc12345");
//below method will return "user"
let key_item = localStorage.key(0);
console.log(key_item);//should print user
This property will return the number of data items present in the localStorage object.
Example:
let no_of_items = localStorage.length;
console.log(no_of_items); //prints length of localStorage object
Both localStorage and sessionStorage only support string key-value data items. That means both key and value must be string only. So, to store an object with multiple items, we need to convert the object to string using JSON.stringify() method. Similarly, we need to use JSON.parse() method to read the object stored in localStorage.
Example
//Lets declare an object
let user={user_id:"abc123",theme:"dark",items_cart:5};
//save this object after fomratting using stringify() method
//set user as key and above object as its value
localStorage.setItem("user",JSON.stringify(user));
//To retrive and read this item, we need to use JSON.parse() method
const user_item = JSON.parse(localStorage.getItem('user'));
console.log(user_item.user_id);// should print abc123
Visit these pages for more information on cookies.
There are two methods in JavaScript to find if a string contains another string or not. The includes() method returns true or false after a search and indexOf() method returns index of a string or -1 if it does not find a match
2021-08-08
The HTTP protocol is stateless which means that the server does not remember about any response it sent to the user’s browser. It executes each request independently without knowing past requests that are already executed.
2021-07-26
Instead of using any library function, in this post we are going to learn how to check if a string is null, blank, empty or undefined with just one line instruction
2021-08-10