HTML5 web storage
What is HTML5 Web storage?
Using HTML5 to store user browsing data locally is a better local storage method than cookies.
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.
Browser support
Note: Internet Explorer 7 and earlier IE versions do not support web storage.
localStorage and sessionStorage
There are two new objects to store data on the client side:localStorage - Data storage without time limit
sessionStorage - Data storage for a session
if(typeof(Storage)!=="undefined")
{
// sessionStorage localStorage is supported!
// Related code...
}
else
{
// Sorry, Web storage is not supported
}
##localStorage object
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<div id="result"></div>
<script>
if(typeof(Storage)!=="undefined")
{
localStorage.lastname="刘奇";
document.getElementById("result").innerHTML="姓名: " + localStorage.lastname;
}
else
{
document.getElementById("result").innerHTML="对不起,您的浏览器不支持web存储……";
}
</script>
</body>
</html>Run the program and try itExample analysis:
Use key="lastname" and value="Smith" to create a localStorage key/value ForRetrieve the value with the key value "lastname" and then insert the data into the element with id="result"Tip: Key/value pairs are usually strings Storage, you can convert the 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:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>php中文网(php.cn)</title>
<script>
function clickCounter()
{
if(typeof(Storage)!=="undefined")
{
if (localStorage.clickcount)
{
localStorage.clickcount=Number(localStorage.clickcount)+1;
}
else
{
localStorage.clickcount=1;
}
document.getElementById("result").innerHTML="点击按钮" + localStorage.clickcount + " time(s).";
}
else
{
document.getElementById("result").innerHTML="对不起,您的浏览器不支持web存储……"; }
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">点击</button></p>
<div id="result"></div>
<p>单击该按钮查看计数器增加。</p>
<p>关闭浏览器选项卡(或窗口),再试一次,计数器将继续计数(不是重置)。</p>
</body>
</html>Run the program and try itsessionStorage object
The sessionStorage method stores data for a session. The data is deleted when the user closes the browser window. How to create and access a sessionStorage::<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>php中文网(php.cn)</title>
<script>
function clickCounter()
{
if(typeof(Storage)!=="undefined")
{
if (sessionStorage.clickcount)
{
sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
}
else
{
sessionStorage.clickcount=1;
}
document.getElementById("result").innerHTML="点击按钮 " + sessionStorage.clickcount + " time(s) ";
}
else
{
document.getElementById("result").innerHTML="对不起,您的浏览器不支持web存储……";
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">点击</button></p>
<div id="result"></div>
<p>单击该按钮查看计数器增加。</p>
<p>关闭浏览器选项卡(或窗口),再试一次,计数器复位</p>
</body>
</html>Run the program to try it