1. What is localStorage, sessionStorage
In HTML5, a new localStorage feature has been added. This feature is mainly used as local storage to solve the problem of insufficient cookie storage space (the storage space of each cookie in the cookie is 4k). In localStorage, general browsers The supported size is 5M, this localStorage will be different in different browsers.
Second, the advantages and limitations of localStorage
Advantages of localStorage
1. localStorage extends the 4K limit of cookies
2. LocalStorage can directly store the data requested for the first time locally. This is equivalent to a 5M database for front-end pages. Compared with cookies, it can save bandwidth, but this is only available in high-version browsers. supported by China
Limitations of localStorage
1. The size of the browser is not uniform, and the IE version above IE8 only supports the localStorage attribute
2. At present, all browsers will limit the value type of localStorage to string type, which requires some conversions for our daily more common JSON object types
3. localStorage is not readable in the browser's privacy mode
4. LocalStorage is essentially a reading of strings. If there is a lot of storage content, it will consume memory space and cause pages to become stuck.
5. localStorage cannot be crawled by crawlers
The only difference between localStorage and sessionStorage is that localStorage belongs to permanent storage, while sessionStorage belongs to when the session ends, the key-value pair in sessionStorage will be cleared
Here we use localStorage to analyze
Third, the use of localStorage
Browser support for localStorage:
Here I want to make a special statement. If you are using IE browser, then UserData is used as storage. The content of localStorage is mainly explained here, so userData will not be explained too much, and in the blogger's personal opinion, there is no It is necessary to learn the use of UserData, because the current IE6/IE7 is in the obsolete position, and many page development today will involve emerging technologies such as HTML5\CSS3, so generally we will not use it. to be compatible
First of all, when using localStorage, we need to determine whether the browser supports the localStorage attribute
if(！window.localStorage){
alert("The browser supports localstorage");
return false;
}else{
//Main logic business
}
There are three ways to write to localStorage, there are three ways to write to localStorage, here are the introductions one by one
if(！window.localStorage){
alert("The browser supports localstorage");
return false;
}else{
var storage=window.localStorage;
//write to a field
storage["a"]=1;
//write to b field
storage.a=1;
//Write to the c field
storage.setItem("c",3);
console.log(typeof storage["a"]);
console.log(typeof storage["b"]);
console.log(typeof storage["c"]);
}
The result after running is as follows:
It should be noted here that the use of localStorage also follows the same-origin policy, so different websites cannot directly share the same localStorage
The final result printed on the console is:
I don’t know if readers have noticed that the int type was just stored, but the string type was printed out. This is related to the characteristics of localStorage itself. LocalStorage only supports string type storage.
read from localStorage
if(!window.localStorage){
alert("The browser supports localstorage");
}else{
var storage=window.localStorage;
//write to a field
storage["a"]=1;
//write to b field
storage.a=1;
//Write to the c field
storage.setItem("c",3);
console.log(typeof storage["a"]);
console.log(typeof storage["b"]);
console.log(typeof storage["c"]);
//The first method reads
var a=storage.a;
console.log(a);
//The second method reads
var b=storage["b"];
console.log(b);
//The third method reads
var c=storage.getItem("c");
console.log(c);
}
There are three kinds of reading of localStorage, among which the official recommendation is the two methods of getItem\setItem to access it, don't ask me why, because I don't know this either
I said before that localStorage is equivalent to a front-end database. The database mainly consists of four steps of adding, deleting, checking and modifying. The reading and writing here are equivalent to the two steps of adding and checking.
Let's talk about the two steps of deleting and modifying localStorage
Changing this step is easier to understand. The idea is the same as changing the value of a global variable. Here we take an example to briefly explain
if(!window.localStorage){
alert("The browser supports localstorage");
}else{
var storage=window.localStorage;
//write to a field
storage["a"]=1;
//write to b field
storage.b=1;
//Write to the c field
storage.setItem("c",3);
console.log(storage.a);
// console.log(typeof storage["a"]);
// console.log(typeof storage["b"]);
// console.log(typeof storage["c"]);
/*Dividing line*/
storage.a=4;
console.log(storage.a);
}
This on the console, we can see that the a key has been changed to 4
Deletion of localStorage
1. Clear all contents of localStorage
var storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);
console.log(storage);
storage.clear();
console.log(storage);
2. Delete a key-value pair in localStorage
var storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);
console.log(storage);
storage.removeItem("a");
console.log(storage.a);
View the results in the console
localStorage key acquisition
var storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);
for(var i=0;i<storage.length;i++){
var key = storage.key (i);
console.log(key);
}
Use the key() method to enter and exit the index to get the corresponding key
4. Other considerations for localStorage
Generally, we will store JSON in localStorage, but localStorage will automatically convert localStorage to string form in localStorage
At this time, we can use the JSON.stringify() method to convert JSON to JSON string
Example:
if(!window.localStorage){
alert("The browser supports localstorage");
}else{
var storage=window.localStorage;
var data = {
name:'xiecanyong',
sex: 'man',
hobby: 'program'
};
var d=JSON.stringify(data);
storage.setItem("data",d);
console.log(storage.data);
}
To convert the JSON string into a JSON object after reading, use the JSON.parse() method
var storage=window.localStorage;
var data = {
name:'xiecanyong',
sex: 'man',
hobby: 'program'
};
var d=JSON.stringify(data);
storage.setItem("data",d);
//Convert JSON string to JSON object output
var json=storage.getItem("data");
var jsonObj=JSON.parse(json);
console.log(typeof jsonObj);
The print is an Object object
Another point to note is that other types need to be converted when they are read.