localStorage usage summary
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
3. Browser support for localStorage using localStorage:
I should make a special statement here. If you are using IE browser, then UserData is used as storage. The content of localStorage is mainly explained here, so userData is not too much. Explain, and from the blogger's personal point of view, it is not necessary to learn the use of UserData, because the current IE6/IE7 is in the position of elimination, and many page development today will involve HTML5\CSS3 and other emerging technologies , so when using the above, we generally will not be compatible with it.
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
}
Writing to localStorage, there are three ways to write to localStorage, here are the introductions one by one
(One of my favorites is to simply put
localStorage . setItem ( "oneNameHc" , $scope. productName ) ; insert this line into the next line of code you want to insert Yes, then a page can be read directly
$scope . oneNameHc = localStorage . getItem ( "oneNameHc" ) ; this behavior reads
)
if(!window.localStorage){
alert("The browser supports localstorage");
return false;
}else{
var storage=window.localStorage;
//Write a field
storage["a"]=1;
//Write Enter b field
storage.a=1;
//Write 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:
Here, it should be noted that the use of localStorage also follows the same-origin policy, so different websites cannot directly share the same localStorage
. The 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.
localStorage read
if(!window.localStorage){
alert("Browser supports localstorage");
}else{
var storage=window.localStorage;
//Write a field
storage["a"]=1;
//Write Enter b field
storage.a=1;
//Write 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);
var b=storage["b"];
console.log(b);
//The third method reads
var c=storage.getItem("c");
console.log(c);
}
Copy code
here is There are three ways to read localStorage. The official recommendation is getItem\setItem to access it. Don't ask me why, because I don't know this. I
said before that localStorage is equivalent to a front-end database. The database is mainly in the 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
. The steps are easy to understand. The idea is the same as re-changing the value of the global variable. Here we will take an example to briefly explain the
copy code
if(!window.localStorage){
alert("The browser supports localstorage");
}else{
var storage=window.localStorage;
//Write a field
storage["a"]=1;
//Write b field
storage.b=1;
//write to 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"]);
/*split line*/ storage.a
=4;
console.log(storage.a )
; We can see that the a key has been changed to 4 and the deletion of localStorage 1. Clear all the contents of localStorage Copy code var storage=window.localStorage; storage.a=1; storage.setItem("c",3) ; console.log(storage); storage.clear(); console.log(storage);
Copy code
2. Delete a key-value pair in localStorage
Copy code
var storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);
console.log(storage);
storage.removeItem ("a");
console.log(storage.a);
copy code
console to view
the result localStorage key get
copy code
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
); Corresponding key 4. Other precautions for localStorage
Generally, we will store JSON in localStorage, but when localStorage will automatically convert localStorage into string form
, we can use the JSON.stringify() method to convert JSON into JSON string
Example:
Copy code
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 the
code , use JSON.parse()
Method
copy code
var storage=window.localStorage;
var data={
name:'xiecanyong',
sex:'man',
hobby:'program'
};
var d=JSON.stringify(data);
storage.setItem("data",d);
//The JSON string Convert to JSON object output
var json=storage.getItem("data");
var jsonObj=JSON.parse(json);
console.log(typeof jsonObj);
Copy the code
and print out Object object
Another point to note is that , other types must be converted when read out