How to implement local storage Information in JS (based on localStorage and userData)

This article mainly introduces how to implement local storage Information in JS, and how to implement local storage based on localStorage and userData, for more information about how to use JavaScript to store local information, see the following article.

This example describes how to store information locally in JS. We will share this with you for your reference. The details are as follows:

With the rapid development of WEB applications, local storage of some data has become an important requirement, and there are many implementation solutions. The most common one is cookie, which is frequently used, however, the disadvantage of cookie is obvious. Other solutions, such as userData of IE6 or above, globalStorage of Firefox, and local Flash storage, apart from Flash, the others have some compatibility issues.

SessionStorage and localStorage

Web Storage consists of sessionStorage and localStorage.

SessionStorage is used to locally store data in a session. The data can be accessed only on pages in the same session. When the session ends, the data is also destroyed. SessionStorage is not a persistent local storage, but a session-level storage.

LocalStorage is used for persistent local storage. Unless data is actively deleted, the data will never expire.

UserData

Syntax:

XML
HTML
Scripting object. style. behavior = "url ('# default # userdata ')"
Object. addBehavior ("# default # userData ")

Attribute:

Expires sets or obtains the expiration date of the data saved by userData behavior.
XMLDocument gets the reference of XML.

Method:

getAttribute()Obtains the specified property value.
load(object) Load the stored object data from the userData storage area.
removeAttribute() Removes the specified attribute of an object.
save(object) Store object data in a userData storage area.
setAttribute() Set the specified property value.

LocalStorage

Method:

localStorage.getItem(key):Obtains the local storage value of a specified key.
localStorage.setItem(key,value)：Store value to key field
localStorage.removeItem(key):Deletes the local storage value of a specified key.

Encapsulation

LocalData = {hname: location. hostname? Location. hostname: 'localstatus', isLocalStorage: window. localStorage? True: false, dataDom: null, initDom: function () {// initialize userData if (! This. dataDom) {try {this. dataDom = document. createElement ('input'); // use the hidden input element this. dataDom. type = 'ddn'; this. dataDom. style. display = "none"; this. dataDom. addBehavior ('# default # userdata'); // This is the syntax document of userData. body. appendChild (this. dataDom); var exDate = new Date (); exDate = exDate. getDate () + 30; this. dataDom. expires = exDate. toUTCString (); // set the expiration time} catch (ex) {return false ;}} return true ;}, set: function (key, value) {if (this. isLocalStorage) {window. localStorage. setItem (key, value);} else {if (this. initDom () {this. dataDom. load (this. hname); this. dataDom. setAttribute (key, value); this. dataDom. save (this. hname) }}, get: function (key) {if (this. isLocalStorage) {return window. localStorage. getItem (key);} else {if (this. initDom () {this. dataDom. load (this. hname); return this. dataDom. getAttribute (key) ;}}, remove: function (key) {if (this. isLocalStorage) {localStorage. removeItem (key);} else {if (this. initDom () {this. dataDom. load (this. hname); this. dataDom. removeAttribute (key); this. dataDom. save (this. hname )}}}}

It's easy to use. set, get, and remove are all done.

The demo Code involved is as follows: