HTML5 Storage API

HTML5 Storage API
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 shortcomings: 1) the cookie size is limited, the cookie size is limited to 4 kb, and big data like files or emails cannot be accepted. 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 can be divided into two types: sessionStorage localStorage key and value must both be strings. In other words, web Storage APIs can only operate on strings. Web Storage API checks the browser's support detection window. sessionStorage and window. whether or not localStorage has sessionStorage. setItem ("myFirstKey", "myFirstValue"); or sessionStorage. myFirstKey = myFirstValue; or sessionStorage ["myFirstKey"] = "myFirstValue"; obtain sessionStorage. getItem ("myFirstKey"); deletes the 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 web page. As long as the web page is of the same source (rules, hosts, and ports) based on the same key, we can The settings are obtained on the sessionStorage page. 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 a user closes a window or a browser, sessionStorage data will be cleared. The difference between localStorage and sessionStorage is that the names used to access the data are different. They are accessed through localStorage and sessionStorage objects, the main difference between the two is the data retention period and the way they are shared. SessionStorage localStorage data is stored when the window or tab that stores it is closed (data can be stored when the browser refreshes, but not when the browser closes) the life cycle of data is longer than the life cycle of windows or browsers. Data is visible only in the windows or tabs that build them. data can be shared by every window or tab in the same source to store data on the local client, in this way, obtaining data from the local machine instead of remotely reduces network traffic and increases the response speed of the browser. 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. 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 );