Quick JavaScript Interview Questions (2015)
Chapter 11. Local Storage
Q. What is local storage?
ANSWER
HTML5 provides a feature to store data locally in end user’s browser. Data is stored in the browser as key-value pair. Unlike cookie it has average space of 5 MB. This storage comes in 2 different type sessionStorage and localStorage.
localStorage : it stores data with no expiration date. sessionStorage : it stores data with an expiration date.
Q. Which one is the main Storage interface?
ANSWER
window.Storage() is the main interface from where the localStorage and sessionStorage are implemented. This interface has the below definition.
interface Storage {
readonly attribute unsigned long length;
DOMString? key(unsigned long index);
getter DOMString? getItem(DOMString key);
setter creator void setItem(DOMString key, DOMString value); deleter void removeItem(DOMString key);
void clear();
}
The details of the above code are as follows:
setItem(key,value) : This methods stored the value in storage using key-value pair.
getItem(key) : This method retrieves the stored object using the key.
removeItem(key) : This methods removes the stored item based on the key.
clear() : Deletes all the items from the storage. length : This property returns the length of the storage, no of elements inside the storage.
key(position) : This method returns the key for the value in the given numeric position.
Q. How to store and retrieve an object in local storage? ANSWER
Local storage provides setItem() and getItem() for storing and retrieving an object from the storage. setItem(key, value) method takes 2 input parameter to store the object. The getItem(key) method retrieves the value using key as input parameter. Below code shows the storing “Sandeep Kumar” string in “myName” key and then retrieves this string place it in a HTML element.
<!DOCTYPE html>
<html>
<body>
<div id="resultContainer">
</div>
<script>
var container =
document.getElementById("resultContainer");
localStorage.setItem("myName", "Sandeep Kumar"); container.innerHTML = localStorage.getItem("myName"); </script>
</body>
</html>
Below screenshot shows the chrome developer storage preview which holds the above object as key and value pair.
Q. How to attach an event to a local storage?
ANSWER
When local storage objects get modified a storage event is fired. A callback method can be attached to window object using addEventListener() or attachEvent() method.
NOTE:
When the setItem(), removeItem(), and clear() methods are called on a Storage object x that is associated with a local storage area, if the methods did something, then in every Document object whose Window object's localStorage attribute's Storage object is associated with the same storage area, other than x, a storage event must be fired.
In simple sentence, a storage event is fired on every
window/tab except for the one that updated
the localStorage object and caused the event. Below code has a callback method listening to storage event. When the button is clicked in one of the tab to update the local storage object the storage event listener in the other tab got triggered and content is updated.
<!DOCTYPE html>
<html>
<body>
<div id="resultContainer"> </div>
<button onclick="update()">Click Me</button> <script>
var container =
document.getElementById("resultContainer"), methodStorageEvent = function(event){ container.innerHTML = "Event
Fired"+localStorage.getItem("myName") ;
},
counter = 1,
update = function(){
localStorage.setItem("myName", ++counter); container.innerHTML =
localStorage.getItem("myName") ;
};
window.addEventListener("storage",
methodStorageEvent,false)
</script>
</body>
</html>
Below screenshot demonstrates how the storage event is fired and the other tabs which accessing the same page receives the storage event and update their content.
