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.