Html5 web storage and html5web Storage
Html5 provides two methods to store data on the client:
1: localStorage-data storage with no time limit
2: sessionStorage-data storage for a session
Of course, before that, this was all done by cookies, but you may have thought that cookies are not suitable for storing big data. Cookies are transmitted by requests from each server, this makes Cookie efficiency less efficient. In HTML5, data is not transmitted by every server, but is used when a website request is sent. This makes it possible to store big data on the Web without affecting the performance of the website.
Of course, for different websites, data is stored in different regions, and you can access the website's own data. HTML5 uses Javascript to store and access data. Now, let's demonstrate the first method,
LocalStorage is a data storage method without time restrictions. Next we will create and access an instance of localStorage
<! Doctype html>
<Html>
<Body>
<Script type = "text/javascript">
LocalStorage. TestName = "samll ";
Document. write ("Test name:" + localStorage. TestName );
</Script>
</Body>
</Html>
If we store a samll name and read it out, is this really valid? After the web page is executed once, you can delete localStorage. lastname = "samll"; still valid!
Next, let's take a practical column. Let's record the number of page visits by users.
<Script type = "text/javascript">
// Determine whether the user has accessed the webpage
If (localStorage. pagecount ){
LocalStorage. pagecount = Number (localStorage. pagecount) + 1;
}
Else {
LocalStorage. pagecount = 1;
}
Document. write ("access" + localStorage. pagecount + "times ");
<Script/>
The sessionStorage and sessionStorage methods are used to store data for a session. When the user closes the browser window, the data will be deleted. So pay attention to it !!
The method for creating and accessing a sessionStorage instance is not slightly different from that for localStorage.
<Script type = "text/javascript">
SessionStorage. sessName = "Jike ";
Document. write (sessionStorage. sessName );
</Script>
Embedded on the webpage, Jike appears. After the webpage is closed, sessName is deleted from the source code. When the webpage is opened, undefined is displayed, indicating that sessName does not exist.
Since the differences between sessionStorage and localStorage are explained, let's talk about the number of visits of sessionStorage on the web page and make a record for analysis.
<! Doctype html>
<Html>
<Body>
<Script type = "text/javascript">
// Check whether the page is accessed for the first time.
If (sessionStorage. pagecount)
{
SessionStorage. pagecount = Number (sessionStorage. pagecount) + 1;
}
Else
{
SessionStorage. pagecount = 1;
}
Document. write ("access" + sessionStorage. pagecount + ", in the case of sessionStorage ");
</Script>
<P> refresh the page once, counter + 1 </p>
<P> close the browser window and try again, which is already 1. </P>
</Body>
</Html>
Now, the two new methods for storing data provided by HTML5 are the content above. You can make suggestions on how to learn and make progress together! Tomato _ fried tomato
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
