Shulou(Shulou.com)06/01 Report--

This article will explain in detail what are the network storage methods in HTML5. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

1 preface

With the rapid development of the Internet, web-based applications are becoming more and more common, and at the same time, they are becoming more and more complex. In order to meet the increasingly updated needs, they will often store data on local devices, such as recording historical activity information. In the traditional way, [xss_clean] is used for storage, but because its storage space is only about 4KB, and complex operations are needed for analysis, it brings a lot of inconvenience to the issuer. Therefore, HTML5 specification puts forward the solution of network storage.

2 Web storage and its two storage methods

2.1 introduction to Web Storage

2.1.1 Features

(1) it is convenient to set and read data.

(2) large capacity, about 5m sessionStorage localStorage about 20m

(3) you can only store strings, and if you want to store JSON objects, you can use window.JSON 's stringify () method and parse () method for serialization and deserialization.

2.1.2 advantage

(1) reduce network traffic: once the data is saved locally, you can avoid requesting data from the server, thus reducing unnecessary data requests and unnecessary data transfer back and forth between the browser and the server.

(2) Fast display of data: good performance, reading data locally is much faster than getting data from the server through the network, and local data can be obtained immediately. In addition, the page itself can also be cached, and if the whole page and data are local, it can be displayed immediately.

(3) temporary storage: in many cases, the data only needs to be used when the user is browsing a set of pages, and the data can be discarded after closing the window. In this case, it is very convenient to use sessionStorage.

2.2 localStorage for local storage

As one of the API of HTML5 Web Storage, localStorage is mainly used for local storage. Local storage means that the data is stored in the client computer as a key-value pair, and the data will always exist until the user or script actively clears the data. That is, data that uses local storage will be persisted. The advantage of localStorage is that it extends the 4KB limitations of cookie and can store the data requested for the first time directly locally, which is equivalent to a 5m database for front-end pages.

2.2.1 method properties in localStorage

Method attribute

Description

SetItem (key,value)

This method takes a key name and value as a parameter, adds a key-value pair to the storage, and updates its corresponding value if the key name exists

GetItem (key)

This method takes a key name as a parameter and returns the value corresponding to the key name.

RomoveItem (key)

This method takes a key name as a parameter and removes the key name from the storage

Length

An array-like length property that accesses the number of item in the Storage object

Key (n)

The name used to access the nth key

Clear ()

Clear all localSotrage content under the current domain

Form 2.2.1

Code example:

LocalStoragedocument.getElementById ("localStorageId"). Onclick=function () {/ / save the data of the user's data in input to localStoragevar username=document.getElementById ("username"). Value;window.localStorage.setItem ("username", username);}; document.getElementById ("getlocalStorageId"). Onclick=function () {/ / get data from localStoragevar username=window.localStorage.getItem ("username"); alert (username);} Document.getElementById ("removesessionStorageId") .onclick=function () {/ / delete the data in localStorage var username=document.getElementById ("username") .value;window.localStorage.removeItem ("username");}

SessionStorage is mainly used for regional storage, which means that the data is only valid for the session period of a single page. Because sessionStroage is also an instance of Storage, the methods in sessionStroage and localStorage are basically the same, the only difference is that the life cycle of storing data is different, locaStorage is permanent storage, while the life cycle of sessionStorage is consistent with the session, and the data disappears at the end of the session.

Implementation of Regional Storage by 2.3sessionStorage

From the hardware point of view, the data of localStorage is stored in the hard disk, the data is still on the hard disk when the browser is closed, and can still be obtained by opening the browser again, while the data of sessionStorage is saved in the memory of the browser, when the browser is closed, the memory will be automatically cleared, it should be noted that the data stored in sessionStorage is only valid in the current browser window.

Code example:

SessionStorage name: age: / / add data document.getElementById ("sessionStorageId"). Onclick = function () {/ / get the value of the name and age input box var username = document.getElementById ("username"). Value;var age = document.getElementById ("age"). Value / / define a user object to store the acquired information var user = {username: username,age: age} / / use stringify () to store the serial number of the JSON object into sessionStoragewindow.sessionStorage.setItem ("user", JSON.stringify (user));} / / data is stored in sessionStorage. If you close the browser, the data disappears. / / single browser window page valid document.getElementById ("getsessionStorageId"). Onclick = function () {var valu = window.sessionStorage.getItem ("user"); alert (valu);}; / / clear all data document.getElementById ("clearsessionStorageId"). Onclick = function () {window.sessionStorage.clear ();} This is the end of this article on "what are the network storage methods in HTML5?". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.