Shulou(Shulou.com)06/03 Report--

This article introduces you how to carry out JavaScript local storage practice, the content is very detailed, interested friends can refer to, hope to be helpful to you.

There are many local storage solutions, such as Flash SharedObject, Google Gears, Cookie, DOM Storage, User Data, window.name, Silverlight, Open Database, etc.

Borrow a picture from the Internet to take a look at the current mainstream local storage solutions:

Cookie: widely used in web, but the limitation is very obvious, the capacity is too small, some sites will disable cookie,cookie for security reasons, it is not as secure as expected, and the content of Cookie will be sent to the server with the page request.

Flash SharedObject: use kissy's store module to call Flash SharedObject. The advantage of Flash SharedObject is moderate capacity, basically no compatibility problems, the disadvantage is to introduce specific swf and js files in the page, add additional burden, tedious processing; or some machines do not have a flash operating environment.

Google Gears: Google's offline solution has been stopped updating, and html5's localStorage solution is officially recommended.

User Data: it is a storage space specially opened up by Microsoft for IE in the system, so it only supports the combination of Windows+IE. The actual test can be used normally under 2000 (IE5.5), XP (IE6, IE7) and Vista (IE7). Under XP, it is usually located in C:\ Documents and Settings\ user name\ UserData, and sometimes in C:\ Documents and Settings\ user name\ Application Data\ Microsoft\ Internet Explorer\ UserData. Under Vista, go to C:\ Users\ user name\ AppData\ Roaming\ Microsoft\ Internet

Explorer\ UserData; the size limit of a single file is 128KB. A total of 1024KB files can be saved under a domain name, and there should be no limit on the number of files. In restricted sites, these two values are 64KB and 640KB, respectively, so if you take into account a variety of circumstances, a single file is best able to control below 64KB.

LocalStorage: compared with the above local storage scheme, localStorage has its own advantages: large capacity, easy to use, powerful and native support; disadvantages are poor compatibility (chrome, safari, firefox,IE 9 and firefox,IE 9 and IE8 all support localStorage, mainly because versions below IE8 do not support it), and poor security (so do not use localStorage to store sensitive information).

Let's talk about localStorage and UserData:

UserData

Basic syntax:

XML:

HTML:

Script:

Object.style.behavior = "url ('# default#userData')"

Object.addBehavior ("# default#userData")

Attributes:

Expires sets or gets the expiration date of data saved by userData behavior.

XMLDocument gets a reference to XML.

Methods:

GetAttribute () gets the specified attribute value.

Load (object) loads stored object data from the userData store.

RemoveAttribute () removes the specified property of the object.

Save (object) stores object data in an userData store.

SetAttribute () sets the specified property value.

To use the userData storage function, you must first create a HTML tag, and then add the behavior:url ('# default#userData') style attribute, which means that the userData is stored in the HTML tag, of course, not all tags are available, only some tags. For more information, visit MSDN's "userData"

Behavior ".

Here are some methods encapsulated:

01var UserData

= {02userData: null,03name:

Location.hostname,04//this.name

= "css88.com"; 05init: function ()

{06if (! UserData.userData)

{07try {08UserData.userData

= document.createElement ('INPUT'); 09UserData.userData.type

= "hidden"; 10UserData.userData.style.display

= "none"; 11UserData.userData.addBehavior ("# default#userData"); 12document.body.appendChild (UserData.userData); 13var expires

= new Date (); 14expires.setDate (expires.getDate ()

+ 365); 15UserData.userData.expires

= expires.toUTCString (); 16} catch (e)

{17return false;18} 19} 20return true;21}, 2223setItem: function (key

Value) {2425if (UserData.init ())

{26UserData.userData.load (UserData.name); 27UserData.userData.setAttribute (key)

Value); 28UserData.userData.save (UserData.name); 29} 30}, 3132getItem: function (key)

{33if (UserData.init ())

{34UserData.userData.load (UserData.name); 35return UserData.userData.getAttribute (key) 36} 37}, 3839remove: function (key)

{40if (UserData.init ())

{41UserData.userData.load (UserData.name); 42UserData.userData.removeAttribute (key); 43UserData.userData.save (UserData.name); 44} 4546} 47}; localStorage

Very easy-to-understand interface:

LocalStorage.getItem (key): gets the value stored locally by the specified key

LocalStorage.setItem (key,value): store value in the key field

LocalStorage.removeItem (key): deletes the value stored locally by the specified key

Note that the values stored in localStorage are string types. When dealing with complex data, such as json data, you need to use the JSON class to convert json strings into a really usable json format. LocalStorage's second hands-on tutorial will focus on demonstrating related functions. LocalStorage also provides a storage event that is triggered when the stored value changes.

Currently, browsers all have good debugging features for developers. Here are the debugging tools for Chrome and Firefox to view LocalStorage:

Special attention: research on the differences of localStorage in different browsers

Demo page

Here is a simple demo page, using localStorage and userData examples, try to edit the content in the text box of the demo page, do not click the publish button, close or refresh (force refresh Ctrl+F5) will save your edited content, it will always be valid, unless you click the publish button to delete the stored content. No data was sent to the server during the whole process.

On how to carry out JavaScript local storage practice to share here, I hope that the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.