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中文網(wǎng)(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中文網(wǎng)(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>單擊該按鈕查看計數(shù)器增加。</p>
<p>關(guān)閉瀏覽器選項卡(或窗口),再試一次,計數(shù)器將繼續(xù)計數(shù)(不是重置)。</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中文網(wǎng)(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>單擊該按鈕查看計數(shù)器增加。</p>
<p>關(guān)閉瀏覽器選項卡(或窗口),再試一次,計數(shù)器復(fù)位</p>
</body>
</html>Run the program to try it
