HTML5 web storage
May 03, 2021 HTML5
Table of contents
HTML5 Web Storage
Prior to HTML5, cookies were mainly used for storage, and the disadvantages of cookies were: data needed to be carried on the request head, storage size, however, within 4k. In this section,
HTML5 web storage, a better local storage method than cookies.
What is HTML5 Web Storage?
HTML5 allows you to store the user's browsing data locally.
Earlier, local storage used cookies. B ut Web storage needs to be more secure and fast. T his data is not stored on the server, but it is only used on site data requested by the user. It can also store large amounts of data without affecting the performance of the site.
The data exists as a key/value pair, and the data of the web page is only allowed to be accessed and used by the web page.
Browser support
Internet Explorer 8 Plus, Firefox, Opera, Chrome, and Safari support web storage.
Note: Internet Explorer 7 and earlier versions of IE do not support web storage.
localStorage and sessionStorage
The two objects in which the client stores data are:
- localStorage - Data storage with no time limit
- sessionStorage - a data store for one session
Before using web storage, check that your browser supports localStorage and sessionStorage:
{
// Yes! Support LocalStorage SessionStorage object!
// Some code .....
}
else
{
// Sorry! WEB storage is not supported.
}
LocalStorage object
There is no time limit for the data stored by the localStorage object. The next day, the second week, or the following year, the data is still available.
document . getElementById ( " result " ) . innerHTML = " Website name: " + localStorage . sitename ;
Try it out . . .
Instance resolution:
- Create a localStorage key/value pair using key"sitename" and value"W3Cschool online tutorial.
- Retrieve the value of the key value "sitename" and insert the data into the element of id="result".
The above examples can also be written as such:
// 存储
localStorage.sitename = "W3Cschool在线教程";
// 查找
document.getElementById("result").innerHTML = localStorage.sitename;
localStorage.removeItem("lastname");
- Save data: localStorage.setItem (key, value);
- Read data: localStorage.getItem (key);
- Delete individual data: localStorage.removeItem (key);
- Delete all data: localStorage.clear();
- Get the key of an index: localStorage .key index;
Tip: Key/value pairs are usually stored as strings, and you can convert the format to your own needs.
The following example shows the number of times a user clicked a button.
String values in the code are converted to numeric types:
{
localStorage.clickcount=Number(localStorage.clickcount)+1;
}
else
{
localStorage.clickcount=1;
}
document . getElementById ( " result " ) . innerHTML = " You have already clicked the button " + localStorage . clickcount + " Second-rate " ;
Try it out . . .
SessionStorage object
The sessionStorage method stores data for one session. When the user closes the browser window, the data is deleted.
How to create and access a sessionStorage:
{
sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
}
else
{
sessionStorage.clickcount=1;
}
document . getElementById ( " result " ) . innerHTML = " In this session, you have clicked this button. " + sessionStorage . clickcount + " Second-rate " ;
Try it out . . .