CODEWITHSUNDEEP
javascript
shalinir
shalinir

Reputation: 26

How do we find the various properties of LocalStorage in HTML5

For counting the number of clicks in java script i see some sample code using localStorage.clickcount, this code works very well, but how can we learn about what are all the properties present in localStorage, so that developer can use the same. How will we know what are all the attribute and methods in localstorage class in JS.

Upvotes: 1

Views: 1119

Answers (2)

pranav-dev
pranav-dev

Reputation: 68

In the code you mentioned

localStorage.clickCount

clickCount is user-defiened property and it is used to store the count of clicks. You can add and delete your properties.

Setting Properties

localStorage.myProperty   = "Hello World";

Getting Properties You can get properties from the sessionStorage and localStorage objects like this:

var myProp = localStorage.myProperty;

If the property name is not a valid JavaScript variable name, you will need to use the square bracket access method, like this:

var myProp = localStorage["myProperty"];

Or you can use the getItem() function, like this: var myProp = localStorage.getItem("myProperty");

Deleting Properties You delete a session or local storage property like this:

delete localStorage.myProperty;

Or you can use the removeItem() function, like this:

sessionStorage.removeItem ("myProperty");

Clearing the Local Storage If you want to delete all properties stored in the sessionStorage or localStorage objects, you can use the clear() function. Here is a clear() function call example:

localStorage.clear();

Reading Number of Properties Stored You can read the number of properties stored in the sessionStorage or localStorage objects using the length property, like this:

var length = sessionStorage.length;

var length = localStorage.length;

Iterating Keys in the Local Storage You can iterate the keys (property names) of the key - value pairs stored in the sessionStorage or localStorage, like this:

for(var i=0; i < sessionStorage.length; i++){

    var propertyName = sessionStorage.key(i);

    console.log(  i + " : " + propertyName + " = " +
            sessionStorage.getItem(propertyName));
}

The sessionStorage.length property returns the number of properties stored in the sessionStorage object.

The function key() returns the property name (or key name) of the property with the index passed as parameter to the function.

You can iterate the keys of the localStorage in the same way. Just exchange the sessionStorage object with the localStorage object in the example above.

Local Storage Events When you modify the sessionStorage or localStorage the browser fires storage events. A storage event is fired when you insert, update or delete a sessionStorage or localStorage property.

The storage event is only emitted in other browser windows than the window that performed the modification. For sessionStorage this means that events are only visible in pop up windows and iframes, since each browser window has its own sessionStorage object.

For the localStorage object which is shared across browser windows, events are visible to all other windows open with the same origin (protocol + domain name), including pop up windows and iframes.

Attaching a Storage Event Listener

Attaching an event listener to a local storage object is done like this:

function onStorageEvent(storageEvent){

    alert("storage event");
}

window.addEventListener('storage', onStorageEvent, false);

The function onStorageEvent() is the event handler function.

The addEventListener() function call attaches the event handler function to storage events.

The storageEvent event object passed to the event handler function looks like this:

StorageEvent {
    key;          // name of the property set, changed etc.
    oldValue;     // old value of property before change
    newValue;     // new value of property after change
    url;          // url of page that made the change
    storageArea;  // localStorage or sessionStorage,
                  // depending on where the change happened.
}

You can access this storage event object from inside the event handler function.

Upvotes: 1

Tim
Tim

Reputation: 2187

The localStorage variable that you can store information that does not expire even when the browser closes. You will know what attributes and methods are there because you put them there.

If you want to determine what is inside of it you should be able to use this solution here: Is there an equivalent for var_dump (PHP) in Javascript?

Upvotes: 0

Related Questions