Detailed explanation of the difference between html5 web storage and cookies

Before we made the website, we basically implemented local cached data through cookie, but because the cookie itself has a small storage capacity, The security coefficient is not too high, so it will be difficult to use in many places, and HTML5 provides us with a convenient and fast web storage mechanism.

Client storage characteristics:

In HTML5 data is not passed by each server request, but 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.

Client storage method:

HTML5 is using JAVASCRIPT to store and read local data .

Storage capacity:

Generally, the capacity of cookies is 4KB, while the data stored in HTML5 can reach 5-10M. For website developers It's good news.

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.

sessionStorage method:

The sessionStorage method stores data for a session. When the user closes the browser window, the data will be deleted.

HTML5 code for counting page visits:

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

The above is the detailed content of Detailed explanation of the difference between html5 web storage and cookies. For more information, please follow other related articles on the PHP Chinese website!