HTML5 Web Storage

Brief introduction

HTML5 Web Storage, better than cookies.

• More secure and faster
• Data store in Name/value pairs
• The storage limit is at least 5MB

1. Development process:

2. Browser support:

3. The HTML5 Web Storage provides the following two types of objects:

• Window.localstorage-stores data with no expiration date has no expiration dates
• Sessionstorage-stores data for one session (data are lost when the tab is closed)

The use of the two is no different, using the following localstorage examples

4. Basic use:

Before use should determine whether the browser support

if (typeof (Storage)!== "undefined")   {   //Code for localstorage/sessionstorage.
  } else   {   //sorry! No Web Storage support.
  }

Use:

Localstorage.setitem ("name", "Wish");  Store
localstorage.name= "Wish"; localstorage["name"]= "Wish";  Localstorage.getitem ("name");  Retrieve
 Localstorage.removeitem ("name");  Remove
 localstorage.clear ();      Delete all
 localstorage.key (i);   Get key

Note: Localstorage calls toString on all stored values. So if it's a number, the type will be converted to string.

5. Examples

View in Google resource: RemoveItem after the change of records disappeared

Simple Page Access count:

Use Localstorage:

if (Localstorage.visitcount)
{
Localstorage.visitcount = Number (Localstorage.visitcount) + 1; Conversion type Required
}
Else
{
Localstorage.visitcount= 1;
}
document.getElementById ("Visittimes"). Innerhtml= "You have visited" +
Localstorage.visitcount+ "Time (s).";

Use Sessionstorage:

if (Sessionstorage.visitcount)
{
Sessionstorage.visitcount = Number (Sessionstorage.visitcount) + 1; Conversion type Required
}
Else
{
Sessionstorage.visitcount= 1;
}
document.getElementById ("Visittimes"). Innerhtml= "You have visited" +
Sessionstorage.visitcount+ "Time (s).";

6.github on Store.js

GitHub Address: https://github.com/marcuswestin/store.js/

• Based on LocalStorage:store.js exposes a simple APIs for cross browser local storage
• No compatibility issues: Store.js uses localstorage when available, and falls then on the userData behavior in IE6 and IE7
• The store does not tostring:store.js uses json.stringify () and Json.parse () on each call to Store.set () and Store.get ()

The basic use is as follows:

Store.set ("name", "Wish")  //Store
 store.get ("name")   //Get 
 Store.remove ("username")  //Remove "Name"
 store.clear ()  //Clear All keys