HTML5 native Storage (local Storage) data type is a string

Source: Internet
Author: User
Tags time limit

localstorage– data storage with no time limit
sessionstorage– data storage for a session

——————
Localstorage method
The data stored by the Localstorage method has no time limit. Data is still available after the next day, the second week, or the following year.

The code is as follows Copy Code

<input id= "range" type= "range" max= "0" min= "1" step=

Or.onchange=function () {
Document.title=or.value;
Localstorage.rangevalue=or.value;
}

if (localstorage.rangevalue) {//If present, assign value
Or.value=localstorage.rangevalue;
}

The way to store data is to add an attribute directly to Window.localstorage,
For example: Window.localstorage.a or window.localstorage["a".

Its read, write, delete operation method is very simple, is a key-value pairs of the way, as follows:

The code is as follows Copy Code
Localstorage.a = 3;//Set A to "3"
Localstorage["a"] = "SFSF";/set A To "SFSF", overriding the value above
Localstorage.setitem ("B", "Isaac");/set B to "Isaac"
var A1 = localstorage["A"];//gets the value of a
var a2 = localstorage.a;//Gets the value of a
var B = Localstorage.getitem ("b");//Get the value of B
Localstorage.removeitem ("C");//clear value of C

Localstorage.setitem (Key,value); SetItem is the meaning of saving data.
Localstorage.getitem (key), get a word is to take, remove the meaning, note that the GetItem inside the parameter is key

How do I erase local storage data?


Localstorage.clear (), one-time purge: Using the Clear () method clears all saved data, so this operation is dangerous unless you really want to.

Localstorage.removeitem (key) individually cleared

Localstorage.length//Returns the length of local data
Gets the key key value of nth data to call the key () method: Localstorage.key (N)

Localstorage storage size and overflow detection

Overflow detection, using the form of try{} catch{} to capture:

The code is as follows Copy Code

try{
Localstorage.setitem (Key,value);
}catch (oexception) {
if (Oexception.name = = ' Quotaexceedederror ') {
Console.log (' has exceeded the local storage limit size! ');
Can be done beyond the limit size, such as the following can clear the record, save again
Localstorage.clear ();
Localstorage.setitem (Key,value);
}
}
The role of Try...catch is to test errors in your code.

Try...catch can test errors in your code. The try section contains the code that needs to be run, and the catch part contains the code that runs when the error occurs.
Grammar:
Try
{
Run code here
}
catch (Err)
{
Handling Errors Here
}

The Storageevent object will contain the following properties.  

Storageevent Objects
Property type Description
key String The key that was modified.
oldValue Any The value before the modification (if the new key value is added, the property is null)
newValue Any The modified value (NULL if the key value is deleted)
url* String The URL of the page that triggered the current store event
* Note: url Some browsers for URIs were published earlier in the attribute's earlier specification 属性。 and did not include this change. For compatibility reasons, you should check for the existence of the URL property before using it, and if there is no URL attribute, you should use the URI attribute

It is important to note that the stored action cannot be canceled in the handler function of the stored event. Storage events are just a notification that the browser gives you after the data change occurs.

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.