Home > Article > Web Front-end > HTML5 web storage detailed explanation

HTML5 web storage detailed explanation

巴扎黑Original: 2017-05-21 14:54:181389browse

The following editor will bring you a detailed explanation of HTML5 Web storage. The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. Come and have a look with the editor, I wish you all a happy game

Storing data on the client

HTML5 provides two types of data on the client A new way to store data on the client side:

• localStorage - No time limit for data storage

• sessionStorage - Before data storage for a session

, these are all done by cookies. But cookies are not suitable for storing large amounts of data because they are passed with each request to the server, which makes cookies slow and inefficient.

In HTML5, data is not passed by every server request, but instead the data is only used when requested. It makes it possible to store large amounts of data without affecting website performance.

For different websites, data is stored in different areas, and

a website can only access its own data.

HTML5 uses JavaScript to store and access data.

localStorage method

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

How to create and access localStorage:

XML/HTML CodeCopy content to clipboard

<!DOCTYPE HTML>
<html>
<body>
<script type="text/javascript">
localStorage.lastname="Smith";   
document.write("Last name: " + localStorage.lastname);   
</script>
</body>
</html>

The following example counts the number of times a user visits a page:

XML/HTML CodeCopy content To clipboard

<!DOCTYPE HTML>
<html>
<body>
<script type="text/javascript">
if (localStorage.pagecount)   
    {   
    localStorage.pagecount=Number(localStorage.pagecount) +1;   
    }   
else   
    {   
    localStorage.pagecount=1;   
    }   
document.write("Visits: " + localStorage.pagecount + " time(s).");   
</script>
<p>刷新页面会看到计数器在增长。</p>
<p>请关闭浏览器窗口，然后再试一次，计数器会继续计数。</p>
</body>
</html>

sessionStorage method

sessionStorage method is for a session Perform data storage. The data is deleted when the user closes the browser window.

How to create and access a sessionStorage:

JavaScript CodeCopy content to clipboard

<!DOCTYPE HTML>   
<html>   
<body>   
<script type="text/javascript">   
sessionStorage.lastname="Smith";   
document.write(sessionStorage.lastname);   
</script>   
</body>   
</html>

The following example counts the number of times a user visits a page in the current session:

##XML/HTML Code

Copy content to clipboard

<!DOCTYPE HTML>
<html>
<body>
<script type="text/javascript">
if (sessionStorage.pagecount)   
    {   
    sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;   
    }   
else   
    {   
    sessionStorage.pagecount=1;   
    }   
document.write("Visits " + sessionStorage.pagecount + " time(s) this session.");   
</script>
<p>刷新页面会看到计数器在增长。</p>
<p>请关闭浏览器窗口，然后再试一次，计数器已经重置了。</p>
</body>
</html>

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：HTML5 solution to the problem that long-pressing on mobile pages will cause paste and copy disablingNext article：HTML5 solution to the problem that long-pressing on mobile pages will cause paste and copy disabling

See more

HTML5 web storage detailed explanation

Related articles