LocalStorage and weblocalstorage

LocalStorage and weblocalstorage

Let me introduce myself first. I am a 27-year-old man, single, and web Front-end programmer. I have been hiding behind the scenes for a long time. I just want to learn nothing ?), In fact, the main reason is that the work is too busy. Every day at around 11 o'clock, there is no time to write things, wash and then go to bed. Recently it happened that there was a technical bottleneck on the back end, so I took a two-day break and optimized my grunt automation.

Today, the weather is very good and the sun is shining. Suddenly, I was excited to open a blog. Of course, as a newcomer to the blog Park, I don't want to worry about resource occupation. I 'd like to explain how to use localStorage first, after all, this is too important for the front end.

Okay. Let's get started with the topic.

LocalStorage, also known as local storage, is a browser-side storage tool with a size of only 5 MB. However, compared with the several K storage volumes of cookies, the storage space is greatly improved, where can I see this stuff )?

Open the browser and choose F12.

:

Look, it's not a complicated thing. It's very intuitive. Here we will teach you how to use it,

Step 1,

Forget it. You know you are all lazy. I have encapsulated it directly, copy it:

1/* Set and obtain Cookie */2 var Cookie = {} 3 Cookie. write = function (key, value, duration) {4 var d = new Date (); 5 d. setTime (d. getTime () + 1000*60*60*24*30); 6 document. cookie = key + "=" + encodeURI (value) + "; expires =" + d. toGMTString (); 7}; 8 Cookie. read = function (key) {9 var arr = document. cookie. match (new RegExp ("(^ |)" + key + "= ([^;] *) (; | $)"); 10 if (arr! = Null) 11 return decodeURIComponent (arr [2]); 12 return ""; 13}; 14 // defines the local storage object 15 var storage = {16 getItem: function (key) {// If the browser supports local storage, getItem is stored in localStorage; otherwise, Cookie17 return window is used. localStorage? LocalStorage. getItem (key): Cookie. read (key); 18}, 19 setItem: function (key, val) {// if the browser supports local storage, call localStorage; otherwise, use Cookie20 if (window. localStorage) {21 localStorage. setItem (key, val); 22} else {23 Cookie. write (key, val); 24} 25} 26 };

Encapsulation is relatively simple. If you have more needs, you can expand it on your own. It is quite simple to use,

Example:

1 storage. setItem ("UserName", ""); // store UserName in 2 if (storage. getItem ("UserName") // If 3 {4 console is saved. log (storage. getItem ("UserName"); // print the format 5}

Note:

Because localStorage stores all the data of the string type, if you want to store the json data, remember to save the data before reading it and do some processing.

1 var myJson = {"UserName", "Handsome yellow guy"}; 2 storage. setItem ("MyJson", JSON. stringify (myJson); // save myJson. Remember JSON. stringify to string 3 var getmyJson = JSON. parse (storage. getItem ("MyJson"); // The retrieved string. Remember JSON. restore parse

Conclusion: Do you think it is so easy to get started with localStorage? In the future, performance optimization, server requests, and historical user behavior records can be achieved through it, it depends on how much inspiration you can think.