Posts in current category

HTML5 web storage


May 03, 2021 13:10 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

HTML5 web storage HTML5 web storage HTML5 web storage HTML5 web storage HTML5 web storage

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:

if(typeof(Storage)!=="undefined")
{
// 是的! 支持 localStorage sessionStorage 对象!
// 一些代码.....
}
else
{
// 抱歉! 不支持 web 存储。
}


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.

localStorage.sitename="W3Cschool在线教程";
document . getElementById ( " result " ) . innerHTML = " 网站名: " + 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;
Remove "lastname" from localStorage:

localStorage.removeItem("lastname");
Whether it's localStorage or sessionStorage, you can use the same APIs, with the following commonly used (in the case of localStorage):

  • 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:

if (localStorage.clickcount)
{
localStorage.clickcount=Number(localStorage.clickcount)+1;
}
else
{
localStorage.clickcount=1;
}
document . getElementById ( " result " ) . innerHTML = " 你已经点击了按钮 " + localStorage . clickcount + " " ;

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:

if (sessionStorage.clickcount)
{
sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
}
else
{
sessionStorage.clickcount=1;
}
document . getElementById ( " result " ) . innerHTML = " 在这个会话中你已经点击了该按钮 " + sessionStorage . clickcount + " " ;

Try it out . . .


Read about it

HTML5 Best Practices: Use web storage instead of cookies