The Web front-end must master the Localstorage

Source: Internet
Author: User

First introduce myself, I male, 27 years old, single, web front-end programmer, a long-term latent in the behind the scenes, only learn not to teach (Pixiu? In fact, the main work is too busy, daily busy to about 11 o'clock, no time to write things, wash and sleep. Recently who happened, the back end there is a technical bottleneck, so small rest for two days, optimize their own grunt automation.

Today the weather is very good, sunny, suddenly an excited to open a blog, of course, as a new blog Park newcomer not to take the resources, reasoning or teach beginners how to use Localstorage bar, after all, this thing is too important to the front end.

Well, gossip doesn't talk about getting into the chase.

Localstorage, the common names of local storage, is a 5M size browser-side storage tools, but compared to the number of cookies stored in the memory, storage space is a lot of improvement, where to see this thing (⊙o⊙)?

Open the browser->f12-> forget it. O (╯-╰) o

See, not a very complicated thing, very intuitive, the following teach you how to use,

The first step,

Well, I know you are all lazy, I directly encapsulated, copy it:

1 /*set up and get cookies*/2 varCookie ={}3Cookie.write =function(Key, value, duration) {4 varD =NewDate ();5D.settime (D.gettime () +1000*60*60*24*30);6Document.cookie = key + "=" + encodeURI (value) + "; Expires= "+d.togmtstring ();7 };8Cookie.read =function(key) {9 vararr = Document.cookie.match (NewRegExp ("(^|)" +key+ "= ([^;] *)(;|$)"));Ten if(Arr! =NULL) One returndecodeURIComponent (arr[2]); A return""; - }; - //defining local Storage objects the varStorage = { -GetItem:function(key) {//if the browser supports local storage then GetItem from Localstorage, otherwise use cookies -  returnWindow.localstorage?Localstorage.getitem (Key): Cookie.read (key); -  }, +SetItem:function(Key,val) {//if the browser supports local storage, call Localstorage, or use cookies -   if(window.localstorage) { + Localstorage.setitem (key,val); A}Else { at Cookie.write (key,val); -   } -  } -};

Package is relatively simple, if there is more need to expand their own, the use of the words is quite simple,

Example:

Storage.setitem ("UserName", "Huang elder brother"); // Save the username in . if (Storage.getitem ("UserName")) // if it's in the store, {console.log (Storage.getitem ("UserName")); // print it out like }

Precautions:

Because the localstorage is stored in a string type, if you want to save JSON remember to do some processing before reading

var myjson={"UserName", "Huang brother"};storage.setitem ("Myjson", Json.stringify (Myjson)); // Save the Myjson in, remember json.stringify turn into a string var getmyjson=json.parse (Storage.getitem ("Myjson")); // take out the string, remember Json.parse restore a bit

End: Do not feel that topsy localstorage so easy, in the future, what performance optimization, reduce the request with the server, user history behavior records, etc. can be done through it, see how much inspiration you can think of

The Web front-end must master the Localstorage

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.