HTML5 web storage
HTML5 web storage, a better local storage method than cookies.
What is HTML5 Web Storage?
Using HTML5, users' 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.
Browser support
Internet Explorer 8+, Firefox, Opera, Chrome, and Safari support Web storage.
Note: Internet Explorer 7 and earlier IE versions do not support web storage.
localStorage and sessionStorage
There are two new objects for storing data on the client:
localStorage - data storage without time limit
sessionStorage - data storage for a session
Before using web storage, you should check whether the browser supports localStorage and sessionStorage:
{
// Yes! localStorage and sessionStorage support!
// Some code.....
}
else
{
// Sorry! No web storage support..
}
localStorage object
The data stored by the localStorage object has no time limit. The data is still available after the next day, week or year.
Instance
<!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="Smith";
document.getElementById("result").innerHTML="Last name: " + localStorage.lastname;
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser does not support web storage...";
}
</script>
</body>
</html>Run instance»
Click the "Run instance" button to view the online instance
Example analysis:
Use key="lastname" and value="Smith" to create a localStorage key/value pair
Retrieval The value with the key value "lastname" then inserts the data into the element with id="result"
Tips: Key/value pairs are usually stored as strings, 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:
Instance
<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter()
{
if(typeof(Storage)!=="undefined")
{
if (localStorage.clickcount)
{
localStorage.clickcount=Number(localStorage.clickcount)+1;
}
else
{
localStorage.clickcount=1;
}
document.getElementById("result").innerHTML="You have clicked the button " + localStorage.clickcount + " time(s).";
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser does not support web storage...";
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Click me!</button></p>
<div id="result"></div>
<p>Click the button to see the counter increase.</p>
<p>Close the browser tab (or window), and try again, and the counter will continue to count (is not reset).</p>
</body>
</html>Run Instance»
Click "Run Instance" " button to view online examples
sessionStorage 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::
Instance
<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter()
{
if(typeof(Storage)!=="undefined")
{
if (sessionStorage.clickcount)
{
sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
}
else
{
sessionStorage.clickcount=1;
}
document.getElementById("result").innerHTML="You have clicked the button " + sessionStorage.clickcount + " time(s) in this session.";
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser does not support web storage...";
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Click me!</button></p>
<div id="result"></div>
<p>Click the button to see the counter increase.</p>
<p>Close the browser tab (or window), and try again, and the counter is reset.</p>
</body>
</html>Run instance»
Click "Run instance" button to view the online instance
