HTML5 Storage API, html5storageapi

HTML5 Storage API, html5storageapi

Web Storage is a very important feature introduced by HTML5. It can store data locally on the client, similar to the cookie of HTML4, but it has more powerful functions than cookies.

Before the emergence of Web Storage, remote Web servers need to store all the relevant data used for interaction between the client and the server. Cookie is a built-in mechanism for transferring text values back and forth between the server and the client. The server can track user information across different web pages based on the data stored in cookies. Each time a user accesses a domain, cookie data is transmitted back and forth.

Although cookies are everywhere, they still have some common disadvantages:

1) The cookie size is limited. The cookie size is limited to 4 kb and cannot accept big data like files or emails.

2) as long as a request involves a cookie, the cookie will be sent back and forth between the server and the browser (this explains why the local file cannot test the cookie ). On the one hand, this means that cookie data is visible on the network and there is a security risk without encryption. On the other hand, no matter which url is loaded, the data in the cookie consumes network bandwidth.

After the emergence of Web Storage, developers can directly store data that requires repeated access across requests in the client browser (developers can also store data in javascript objects, objects are saved during page loading and easy to obtain). You can also restore data when the browser is closed for a long time to reduce network traffic.

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 operate on strings.

Web Storage API checks browser support

Checks whether window. sessionStorage and window. localStorage exist.

 

Set and retrieve 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 storage list

sessionStorage.clear();

 

The set and get calls do not need to appear on the same webpage, as long as the webpage is of the same source (rules, hosts, and ports) based on the same key, we can all get settings in sessionStorage on other webpages. Most developers are familiar with the problem of losing script data during page reloading, but the data stored through the Web Storage API still exists after page reloading.

When the user closes the window or browser, sessionStorage data will be cleared

LocalStorage

The difference between localStorage and sessionStorage is that their names are different. They are accessed through localStorage and sessionStorage objects. The main difference between the two is thatData Retention period and their sharing methods.

SessionStorage	LocalStorage
The data is saved when the window or tab that stores the data is closed. (Data can be stored when the browser refreshes, but not when the browser is closed)	The life cycle of data is longer than that of windows or browsers.
Data is only visible in the window or tab that builds them.	Data can be shared by every window or tab of the same source.

 

By storing data on a local client and obtaining data from a local machine instead of a remote machine, you can reduce network traffic and increase the browser response speed.

A common problem that bothers developers is how to manage data when users switch from one page of an application to another. The traditional method is to store data on servers and transmit data back when users switch between webpages. Another approach is to keep users on a dynamically updated webpage as much as possible. However, users prefer switching between pages.

 

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

 

JSON Object Storage

Although the HTML5 Web Storage specification allows you to save any type of objects as key-value pairs. In fact, some browsers limit data to text strings. Modern browsers support JSON native. We can save JSON data to Storage by serializing complex objects to achieve persistence of complex data types.

Var data; function loadData () {data = JSON. parse (sessonStorage ['mystore']);} function saveData () {sessonStorage ['mystore'] = JSON. stringify (data); // convert the object into a string} window. addEventListener ("load", loadData, true); window. addEventListener ("unload", loadData, true );