Home > Web Front-end > HTML Tutorial > HTML 5 web storage

HTML 5 web storage

黄舟
Release: 2016-12-27 14:51:01
Original
1278 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 limit

sessionStorage - Before data storage for a session

, 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:

Example

<script type="text/javascript">localStorage.lastname="Smith";document.write(localStorage.lastname);
</script>
Copy after login

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

Example

<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>
Copy after login

sessionStorage method

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:

Example

<script type="text/javascript"> sessionStorage.lastname="Smith"; document.write(sessionStorage.lastname); </script>
Copy after login

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

Example

<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>
Copy after login

The above is the content of HTML 5 Web storage. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!


Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template