The webstorage of H5 Web Storage

Source: Internet
Author: User
Tags sessionstorage

H5 provides two ways to store data on the client:
Localstorage persistent local Storage (browser close re-open data still exists)
Sessionstorage Local storage for a session
These are all done by cookies, which are characterized by a small amount of storage, which is transmitted back and forth between the server and the client, and the transmission efficiency is not high. It is generally possible to determine whether the registered user is logged in to the site.
The WebStorage API inherits from the Window object and provides two new properties-window.localstorage and Window.sessionstorage.
Advantages of WebStorage:

    1. Increased storage capacity compared to cookies
    2. You can save the requested form data locally, reduce the HTTP request, and save bandwidth
    3. WebStorage has an easy-to-use API

Limitations of WebStorage:

    1. Different browsers WebStorage and Localstorage are not uniform in size.
    2. Non-readable under browser privacy mode
    3. is essentially a read of a string, so the page becomes jammed when there is too much storage
    4. Cannot be crawled by reptiles

Using WebStorage
1. Store Data:
Localstorage.name = ' value ';
localstorage[' name '] = ' value ';
Localstorage.setitem (' name ', ' value ');
Note the keys and values are always strings. Recommended use of the WebStorage API (setitem,getitem,removeitem,key,length)
2. Get the data:
var value = Localstorage.getitem (' name ');
var value = Localstorage.name;
var value = localstorage[' name '];
3. Delete data:
Clear All data
Localstorage.clear ();
Delete specific data;
Localstorage.removeitem (' name ');
4. Detect if the browser supports:
function storageavailable (type) {
try {
var storage = Window[type],
x = ' __storage_test__ ';
Storage.setitem (x, x);
Storage.removeitem (x);
return true;
}
catch (e) {
return false;
}
}
if (storageavailable (' localstorage ')) {
yippee! We can use Localstorage awesomeness
}
else {
Too bad, no localstorage for us
}
5. Is the storage object, we need to convert to a string deposit, wait for the use of the time to remove and then to the object.
var str = json.stringify (obj);
Localstorage.mydata = str;
var obj = json.parse (localstorage.mydata);
Here is the end of the WebStorage basic use of some small summary, I hope you can help.

The webstorage of H5 Web Storage

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.