Due to the limitation of the size, format, and storage data format of the HTML4 era, if the website application wants to store part of the information on the browser, it can only be used to use cookie. However, these restrictions of cookies also lead to simple data such as Cookie can only store some identifiers such as IDs.
The following is the restriction of cookies:
Most browsers support Cookie with a maximum 4096 byte.
The browser also limits the number of cookies stored on the user computer. Most browsers only allow each site to store 20 cookies; if you try to store more cookies, the oldest cookie will be discarded.
Some browsers will also make absolute restrictions on the total number of cookies they will accept from all sites, usually 300.
Cookie's default situation will be sent to the background server with the HTTP request, but not all requests require cookies, such as: JS, CSS, pictures and other requests do not require Cookie.
In order to crack a series of restrictions on cookies, HTML5 can directly store a large amount of data to the client browser through the new API of JS, and supports complex local databases to make JS more efficient. HTML5 supports two types of webstorage:
There are two APIs stored in H5, one is web storage, and the other is web SQL. No matter which one is based on the JavaScript language, I will teach you how to use web storage
3. Web StorageHTML5 defines the local storage standard web storage, and provides two storage types of API: SessionStorage and LocalStorage. The differences between the two are mainly data saving time and data sharing methods.
1. LocalStorage has been stored locally, and data storage is permanent. Unless the user or program deletes the operation; the data stored by the LocalStorage object has no time limit. After the second, second or next year, the data is still available.Features: ① Safe and permanent preservation in the domain. That is, all pages from the same domain name in the client or browser can access LocalStorage data and data are permanently saved except for deleting, but the data between the client or browser are independent of each other.
② Data will not be sent to the background server with the HTTP request;
③ Do not consider the opportunity for storage data, because the browser is required to support at least 4MB in the HTML5 standard.
Look at an example:
The code is as follows:
Function ClickCounter () {ifof (typeof (storage)! == Undefined) {if (localStorage.clICKCOUNT) {localstorage.clICKCount = Number (localStorage.cl Ickcount) +1;} else {localstorage.clICKCOUNT = 1;} Document.GetelementByid (Result) .innerhtml = You have already clicked the button + localstorage.clICKCount + times;} else {document.GetelementByid (Result) .innerHtml = Sorry, your browser does not support Web storage. ;}} </script> <p> <Button Onclick = ClickCounter () Type = Button> Click me! </Button> </p> <div ID = result> </div> <p> Click the button to view the counter increase. </p> <p> Turn off the browser tab (or window), reopen this page, the counter will continue to count (not reset). </p> 2.SessionStorage is effective during the session, and the data is automatically deleted after the browser is closed;Features: session control, short -term preservation. The concept of session is similar to the SESSION concept of the server side. The short -term storage window or browser or client automatically eliminate data.
compatibility
Note: IE9 LOCALSTORAGE does not support local files. It needs to be supported by the project department to the server!
At present, all mainstream browsers support the Web Storage features of HTML5 to a certain extent. As can be seen from the figure above, basically all modern browsers have supported Web Storage.
The Android platform and the respective browsers of the iOS platform basically support the local storage characteristics of Web Storage. The current mobile devices on the market, in addition to Android phones and iPhone, are more and more tablet, and basically depend on two platforms. Using web storage on the mobile terminal, we hardly need to consider whether the browser is supported. Of course, from the rigor of the code, it is recommended to check whether the browser supports before use
The following is the detection method:
if (Window.LocalStorage) {// Browser supports localStorage} else {// does not support} if (window.SessionStorage) {// The browser supports sessionStorage} else {// does not support} 3. LocalStorageLocalStorage in HTML5's local storage API is the same as sessionStorage. The difference is that SessionStorage is empty after closing the page, and LocalStorage will always be saved. We take LocalStorage as an example, briefly introduce the local storage of HTML5, and make some examples for common problems such as traversal. LocalStorage is an API stored locally in HTML5. Using key value pairs for access data, the access data can only be string. Different browsers have different support of the API, such as usage methods, maximum storage space, etc.
Storage method: Storage string in a key-value manner. Main applications: shopping carts, customer login, game archive. Essence Essence Reserved data types: array, pictures, json, style, script. Essence Essence (As long as it can be serialized into a string content, it can be stored) Storage address: C:/Users/15014/Appdata/Local/Google/Chrome/User Data/DEFAULT/LOCAL Storage (Different computers are different, you need to open the hidden file display, but you can find this folder to search LocalStorage on the C drive. )LocalStorage provides four methods to help us perform related operations on local storage.
(1) LocalStorage.setITEM (key name, key value) stores a string type data on the local client. Among them, the first parameter key represents the identifier of the data, and the second parameter key value is that the value of this is that the value of this is that the value of this is that the value of this is that the value of the parameter is that the value of this. Data itself. like:
LocalStorage.setItem (name, Zhang San); // The data of the storage key name is named and the key value of Zhang San to the local localStorage.setItem (Age, 28); // The storage key name is Age and the key value of 28 data. To the local area
(2) LocalStorage.getITEM (key name) read the data that has been stored in the local area, and read the corresponding key name data through the key name as a parameter. like:
var data = localStorage.getItem (name); alert (data); // Zhang San
(3) LocalStorage.removeItem (key name) Remove the data that has been stored in the local area, and delete the corresponding key name data through the key name as a parameter. like:
var data2 = localStorage.removeItem (name); // Remove the data of data from the local storage key (data2); // Undefined
(4) LocalStorage.clear () Remove all data stored locally. like:
LocalStorage.clear () remove all data stored locally. Such as: localStorage.clear (); // The keys/values of the preserved Age/28 and Name/Zhang San are also removed, all local data ,e bye
(5) In addition, the four functions in SessionStorage are basically the same as the function usage of the above LocalStorage class, which will not be explained in detail.
The following is a small example:
<script type = text/javascript> localStorage.setItem (name, Zhang San); localStorage.setItem (Age, 28); Verify (); (name); very (); // Verification Whether the namestorage.clear (); Verify (); // Verify whether the name and Age exist // custom verification function, verify whether the data of name and Age exists in the function vector () {var Type = localStorage.Getitem (NAM e) ; Var Price = LocalStorage.getITEM (Age); Type = Type? Type: 'Price = Price? Price:' Alert (name: + /n /n + agi Cure ;} </script> 3. LocalStorage expiration strategySince HTML5 does not set an expiry strategy for local storage, you can write your own expiration strategy program when processing the expiration strategy of data processing data, as follows:
<! Doctype> <head> <meta http-equiv = content-type content = text /html; charSet = UTF-8 /> <meta http-equiv = access-aligin convertent = Anonymous> <Title> Locstorage Expired strategy </Title> </Head> <body> </body> </html> <Script> Function Set (key, value) {varcurtime = new date (). Gettime (); .setITEM (key, json.stringify ({value: value, time: curtime})); // Convert to json string sequence/* Note: json.parse is used to resolve JSON objects from a string, such as VAR VAR str = '{name: huangxiaojian, Age: 23}' Results: json.parse (str) object agency: 23 name: huangxiaojian __proto__: object Note: Single quotes are written in except {}, each attribute name must be dual quotes. Otherwise, it will throw an exception. Json.stringify () is used to resolve the string from an object, such as var a = {a: 1, b: 2} Result: json.stringify (a) {a: 1, b: 2} */} function get (Key, exp) // EXP is the expiration time of the settings {var value = localstorage.getItem (key); // Get the storage element var dataobj = json.parse (valse); // Pay the JSON object if (New Date (New Date) () .gettime () -DataObj.time> Exp) // If the current time -minus the storage element set at the time of creation> Expired time {console.log (expires); // Prompt expiration} else {console. log (value =+dataobj.val);}} </script>The operation is as shown in the figure below:
The above is all the contents of this article. I hope it will be helpful to everyone's learning. I also hope that everyone will support VEVB Wulin.com.