Examples of HTML5 local storage scenarios Localstorage

There are many local storage solutions, such as Flash sharedobject, Google Gears, cookies, DOM Storage, User Data, Window.name, Silverlight, Open database, and so on.

HTML5 Local Storage Localstorage

The following are features of a variety of local storage scenarios:

Cookies: Widely used in the web, but the limitations are obvious, the capacity is too small, some sites will be disabled for security reasons Cookie,cookie is not as safe as you might think, and the contents of the cookie will be sent to the server along with the page request.
Flash Sharedobject: Use the Kissy Store module to invoke the Flash sharedobject. Flash Sharedobject is the advantage of moderate capacity, basically does not exist compatibility problems, the disadvantage is to introduce specific SWF and JS files in the page, add additional burden, deal with cumbersome, or some of the machine has no flash operating environment. The
Google gears:google offline solution has been discontinued and is officially recommended for use by the HTML5 Localstorage program.
User Data: Microsoft for IE in the system dedicated to open up a piece of storage space, so that only support windows+ie combination, the actual test in IE5.5, XP (IE6, IE7), Vista (IE7) under the normal use. Under XP, it is generally located in the C:\Documents and Settings\ username \userdata, and sometimes in C:\Documents and Settings\ user names \application Data\microsoft\ Internet Explorer\UserData. In Vista, the C:\Users\ username \appdata\roaming\microsoft \internet explorer\userdata; the size limit for a single file is 128KB, A domain name can save a total of 1024KB of files, the number of files should be unlimited. The two values are 64KB and 640KB in the restricted site, so it is best to have a single file that controls 64KB below, given all the circumstances.
Localstorage: Compared with the above local storage scenarios, Localstorage has its own advantages: large capacity, ease of use, strong, native support; The disadvantage is that compatibility is worse (chrome,  Safari, Firefox,ie 9,ie8 all support Localstorage, mainly IE8 the following version is not supported), security is also poor (so do not use Localstorage to save sensitive information). The
Localstorage has a very user-friendly interface:

Localstorage.getitem (Key): Gets the value of the specified key local store
Localstorage.setitem (key,value): Store value in key field
Localstorage.removeitem (key): Deletes the value locally stored for the specified key
Note that the values stored by Localstorage are string types, and when dealing with complex data, such as JSON data, you need to use the JSON class to convert the JSON string to a truly available JSON format, localstorage the second hands-on tutorial will focus on the relevant features. Localstorage also provides a storage event that fires after the stored value changes.

To detect whether the browser supports JS:

<script type= "Text/javascript" >
if (window.localstorage) {
Alert ("Browse support Localstorage")
}else{
Alert ("Browsing temporarily does not support Localstorage")
}
</script>

Or:

<script type= "Text/javascript" >
if (typeof window.localstorage = = ' undefined ') {
Alert ("Browsing temporarily does not support Localstorage")
}else{
Alert ("Browse temporary support Localstorage")
}
</script>

HTML5 Localstorage Simple Example

The following uses Localstorage to set up and read a local storage entry:

<script type= "Text/javascript" >
Localstorage.setitem (' Tantengvip ', ' www.111cn.net ')
</script>

Browsers now have good developer debugging capabilities, and the following are the Chrome and Firefox debugging tools to view Localstorage: (Click to view larger image)

Viewed by the Localhoststorage option under the Mode tool DOM, the value was found to have been successfully stored.

Expiration time of Localstorage

Localstorage is a local storage, no expiration of one said, unless manually clear or clear the cache otherwise will be retained, but can store the time to store an additional timestamp of the field, the next time to read according to the timestamp to determine whether expired, expired on the delete.

such as a JS project store.js such encapsulation:

Javascript

var storewithexpiration = {
Set:function (Key, Val, exp) {
Store.set (Key, {val:val, exp:exp, Time:new Date (). GetTime ()})
},
Get:function (key) {
var info = store.get (key)
if (!info) {return null}
if (new Date (). GetTime ()-info.time > Info.exp) {return null}
Return Info.val
}
}

Storewithexpiration.set (' foo ', ' Bar ', 1000)
settimeout (function () {Console.log (Storewithexpiration.get (' foo ')}, +)//-> "bar"
settimeout (function () {Console.log (Storewithexpiration.get (' foo ')}, 1500)//-> NULL
Set the expiration time of the localstorage in this manner.

Store.js Project GitHub:

Https://github.com/marcuswestin/store.js

Security of Localstorage

Localstorage do not store sensitive information, it does not have a preventive mechanism for XSS, and security may be problematic.