HTML5 Storage API

Web storage is a very important feature introduced by HTML5 that can store data locally on the client side, similar to HTML4 cookies, but the functionality is much more powerful than cookies.

Before a Web storage occurs, a remote Web server needs to store all the relevant data that is used interactively between the client and the server. A cookie is a built-in mechanism for sending text values back and forth between the server and the client. The server can track the user's information across different Web pages based on the data it puts in the cookie. Each time a user accesses a domain, the cookie data is transmitted back and forth.

Although cookies are ubiquitous, there are some general drawbacks:

1 The size of the cookie is limited and the cookie size is limited to 4KB and cannot accept large data such as files or emails.

2 Whenever a request involves cookie,cookie, it will be sent back and forth between the server and the browser (this explains why local files cannot test cookies). On the one hand, this means that cookie data is visible on the network, security risk is not encrypted, and, on the other hand, network bandwidth is consumed regardless of the data in which the associated Url,cookie is loaded.

After the advent of WEB storage, developers can store data that needs to be repeatedly accessed across requests directly in the client's browser (developers can also store data in JavaScript objects, which are saved when the page loads, and are easily accessible). You can also recover data when you open it again long after you close the browser to reduce network traffic.

The Web storage is divided into two types :
Sessionstorage
Localstorage
Both key and value must be strings, in other words, the Web Storage API can only manipulate strings.

Web Storage API Check Browser support

Detect if Window.sessionstorage and window.localstorage exist

Setting up and getting data

Sessionstorage.setitem ("Myfirstkey", "Myfirstvalue") or Sessionstorage.myfirstkey = Myfirstvalue; or sessionstorage[ "Myfirstkey"] = "myfirstvalue";

Get Data

Sessionstorage.getitem ("Myfirstkey");

Delete data

Sessionstorage.removeitem ("Myfirstkey");

Delete all data in the store list

Sessionstorage.clear ();

The set and get calls are not necessarily on the same page, so long as the pages are homologous (rules, hosts, and ports) based on the same key, we are able to get the settings in the Sessionstorage on other pages. Most developers are accustomed to the problem of losing script data when the page reloads, but data saved through the Web Storage API still exists after reloading the page.

When the user closes the window or browser, the Sessionstorage data is cleared

Localstorage

The difference between Localstorage and sessionstorage is that they are accessed in different names, through Localstorage and Sessionstorage objects, and the differences in behavior are mainly The length of time the data is saved and how they are shared .

Sessionstorage	Localstorage
The data is saved when the window where it is stored or when the label page closes (You can store the data when the browser is refreshed, not when the browser closes)	The life of the data is longer than the lifetime of the window or browser
Data is visible only in the window or tab where they are built	Data can be shared by every window or tab of the same origin

Storing data on local clients, and then getting data locally rather than remotely, can reduce network traffic and increase the response speed of browsers.

A common problem that bothers developers is how to manage data when a user switches from one page of an application to another. The traditional implementation method is to have the server to store the data, when the user switches between the pages to and fro data. Another approach is for the application to keep the user on a dynamically updated page as much as possible. However, users prefer to switch between pages.

Demo Address: http://lovermap.sinaapp.com/test/storage.html

Storage of JSON objects

Although the HTML5 WEB storage specification allows objects of any type to be saved as key-value pairs. The reality is that some browsers restrict data to text string types. Modern browsers natively support JSON. We can save JSON data to storage by serializing complex objects to implement the persistence of complex data types.

var data;
function LoadData () {
data = Json.parse (sessonstorage[' mystorage '));
}
function SaveData () {
sessonstorage[' mystorage ' = json.stringify (data);//object converted to String
}
Window.addeventlistener ("Load", loaddata,true);
Window.addeventlistener ("Unload", loaddata,true);