HTML5 web storage detailed explanation-H5 Tutorial-php.cn

HTML5 web storage detailed explanation

高洛峰

Release： 2017-02-10 10:42:00

Original

1963 people have browsed it

Storing data on the client

HTML5 provides two new methods of storing data on the client:

• localStorage - data storage without time limits

• sessionStorage - Data storage for a session

Before, these were 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 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:

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

Copy after login

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

<!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>

Copy after login

sessionStorage method

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

How to create and access a sessionStorage:

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

Copy after login

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

<!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>

Copy after login

The above is a detailed explanation of HTML5 Web storage This is all the content that the editor has shared with you. I hope it can give you a reference and I hope you will support the PHP Chinese website.

For more articles related to HTML5 Web storage details, please pay attention to the PHP Chinese website!