Before the appearance of HTML5, if the developer needs to store a small amount of data on the client, it can only be implemented through cookies, but there are several insufficient points for cookies:
• The size of the cookies under each domain name is limited to 4KB.
• Cookie will include in each HTTP request, which will cause duplicate data.
• Cookie has no encryption during the network transmission, and there are hidden safety hazards.
The Web Storage function is added to HTML5. The official Web Storage suggests that each website is 5MB, which can store more data than cookies, and has more powerful features than cookies. Web Storage has now received the support of Firefox, Opera, Chrome, Safari's mainstream browsers.
Introduction to web storageWeb Storage is divided into Session Storage and Local Storage:
SESSION Storage: Similar to Session, the data survival period saved by Session Storage is the same as the session period. At the end of the user session, the data saved by Session Storage disappear. Local Storage: The data saved by Local Storage has always been locally locally, unless the user or program is explicitly clear, these data will exist in the same.The Window object provides two attributes of SessionStorage and LocalStorage, which represent the SESSION Storage and Local Storage respectively. This two functions and usage are almost the same, but they have different survival periods for saving data. Storage provides the following attributes and methods (take LocalStorage as an example):
• LocalStorage.Length: Get the number of Key-Value pairs;
• LocalStorage.Key (index): Key to get the index of the INDEX index;
• LocalStorage.getItem (key): Get the value corresponding to the specified key;
• LocalStorage.setItem (key, value): Save the specified key-value pair;
• LocalStorage.removeItem (key): Delete the key-value pair of key-value corresponding to the specified key;
• LocalStorage.clear (): Delete all Key-Value pairs.
It should be noted that both Key and Value must be string. In other words, the API of the Web Storage can only operate the string. So some data that is not a string, we can transform it into a string format through JSON and other methods.
Web storage stores multiple data with JSONWe are familiar with the basic usage of related attributes and methods through a small program:
• The basic information of entering the students (including the number of school numbers, names, grades, gender), use the school number as the key value to store in the Local Storage;
• Inquire the basic information of the students through the school number;
• Show the information of all students;
First of all, we design the HTML page
XML/HTML code Copy content to the clipboard