What is web in HTML5? What are the elements in web storage?

HTML5 web storage, a better local storage method than cookies. This article introduces the meaning and element parsing of HTML5 web storage.

What is HTML5 Web Storage?

Using HTML5, the user's browsing data can be stored locally.

Earlier, local storage used cookies. But Web storage needs to be more secure and fast. These data will not be saved on the server, but these data will only be used when users request website data. It can also store large amounts of data without affecting the performance of the website.

Data exists in key/value pairs, and the data of the web page is only allowed to be accessed and used by the web page.

The two objects used to store data on the client are:

localStorage - used to save the data of the entire website for a long time, and the saved data has not expired time until manually removed.

sessionStorage - Used to temporarily save the data of the same window (or tab). The data will be deleted after closing the window or tab.

Before using web storage, you should check whether the browser supports localStorage and sessionStorage:

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

There is no time limit for the data stored by the localStorage object. The data is still available after the next day, week or year.

localStorage.sitename="PHP中文网教程";
document.getElementById("result").innerHTML="网站名：" + localStorage.sitename;

Example analysis:

Use key="sitename" and value="Rookie Tutorial" to create a localStorage key/value pair.

Retrieve the value with key value "sitename" and insert the data into the element with id="result".

The above example can also be written like this:

// 存储
localStorage.sitename = "PHP中文网教程";
// 查找
document.getElementById("result").innerHTML = localStorage.sitename;

Remove ""sitename" in localStorage:

localStorage.removeItem(""sitename");

Whether it is localStorage or sessionStorage, the APIs that can be used are the same , the following are commonly used (take localStorage as an example):

• Save data: localStorage.setItem(key, value);

• Read data: localStorage.getItem(key);

• Delete single data: localStorage.removeItem(key);

• Delete all data: localStorage.clear();

• Get the key of an index: localStorage.key(index);

Tips: key/value pair Usually stored as a string, you can convert this format according to your needs.

The following example shows the number of times the user clicked the button.

The string value in the code is converted to a numeric type:

Example

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

sessionStorage object

The sessionStorage method stores data for a session. When the user closes the browser window, the data will be deleted.

How to create and access a sessionStorage:

Example

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

The above is the introduction to the web in HTML5 and the analysis of related elements.

[Related recommendations]

What is an HTML file? A preliminary understanding of HTML files

What is HTML5? What are the characteristics, advantages and disadvantages of HTML5?

The above is the detailed content of What is web in HTML5? What are the elements in web storage?. For more information, please follow other related articles on the PHP Chinese website!