Write in front:

Front-end development, when the page refresh, all data will be emptied, this time will use the localstorage technology, front-end localstorage there are three ways, respectively cookie, localstorage and sessionStorage, this is known to everyone. The main content of this article is for these three storage, access, differences, application scenarios. Friends in need can do a reference, like can point wave like, or pay attention to, I hope to help you.

This article first appeared on my personal blog:obkoro1.com

Usage:

Many documents are said a lot of, the usage of the latter are not said, first to learn how to use, otherwise the latter are bullshit, so here I first use the way out.

cookie:

Save cookie values:

    var dataCookie='110';
    document.cookie = 'token' + "=" +dataCookie; Copy the code

Gets the cookie value for the specified name

 functionGetCookie (name) {/ / get the cookie value of the specified name / / (^ |) name = (/ ^; (*). | $), match [0] for the string with the regular expression match, the match [I] to match the regular expression capture array array; var arr = document.cookie.match(new RegExp("(^| )"+name+"= (/ ^; (*). | $)"));
if(arr ! = null) { console.log(arr);return unescape(arr[2]);
}
return null;
}
 var cookieData=getCookie('token'); // Assign the cookie to the variable.Copy the code

First post these two most basic methods, there is a demo at the end of the text and how to set the cookie expiration time, and delete the cookie,

LocalStorage and sessionStorage:

LocalStorage and sessionStorage use the same method, sessionStorage:

var name='sessionData'; var num=120; sessionStorage.setItem(name,num); // Store data sessionstorage.setitem ('value2', 119);letdataAll=sessionStorage.valueOf(); Console. log(dataAll, dataAll)'Get all data'); var dataSession=sessionStorage.getItem(name); / / data for the specified key name var dataSession2 = sessionStorage. SessionData; / / sessionStorage is js object, you can also use the key way to get the value. The console log (dataSession dataSession2,'Get data for specified key name'); sessionStorage.removeItem(name); Console. log(dataAll, dataAll, dataAll)'Get all data 1'); sessionStorage.clear(); // Clear the cached data:localStorage.clear();
  console.log(dataAll,'Get all data 2');  Copy the code

The way to use, basically these above, in fact, is relatively simple. You can copy this into your own compiler, or there’s a demo at the end, so you can click on it.

Similarities and differences:

The use of the above way said, the following is the difference between Lao three, this question is actually a lot of factories when the interview will also be asked, so you can pay attention to the difference between these a few.

Life cycle:

Cookie: The cookie can be set to expire. If it is not set, the cookie expires after the browser is closed by default

LocalStorage: unless manually cleared, it will be permanently saved.

SessionStorage: Valid only for the current page session. It will be cleared after you close the page or browser.

Storage data size:

Cookie: about 4KB

LocalStorage and sessionStorage: can save 5MB of information.

The HTTP request:

Cookies: They are carried in the HTTP header every time. Using cookies to store too much data can cause performance problems

LocalStorage and sessionStorage: Only saved in the client (i.e., the browser), do not participate in the communication with the server

Ease of use:

Cookie: Need programmer own encapsulation, the source cookie interface is not friendly

LocalStorage and sessionStorage: The source-generation interface can be accepted, and can be repackaged to better support Object and Array

Application scenario:

From the security point of view, because each HTTP request will carry cookie information, which is virtually a waste of bandwidth, so cookies should be used as little as possible, in addition, cookies also need to specify the scope, can not be called across the domain, more restrictions. But cookies are better than stprage for identifying user logins. In other cases, if you can use storage, use storage.

Storage kills cookies when it comes to the size of the data to store. Cookies are rarely used nowadays, because bigger is always better.

The only difference between localStorage and sessionStorage is that it is permanently stored in the browser, and that the information is cleared when the page is closed. LocalStorage can be used to pass the page parameters, sessionStorage to save some temporary data, to prevent the user to refresh the page after the loss of some parameters.

Browser support:

LocalStorage and sessionStorage are new features to HTML5 and may not be supported by some browsers.

The browser support for cookies was not found. You can determine if your browser supports cookies by using the following code:

if(navigator.cookieEnabled) {
  alert("Your browser supports cookies."); // The browser supports cookies}else {
  alert("Your browser does not support cookies"); // The browser does not support cookies}Copy the code

Data store:

Cookie, localStorage, and sessionStorage Stores data

Exception: Cookie size and number limit of each browser.

Cookies need to be used with caution, so if you’re interested, check out this link.

The demo link

The above demo code, uploaded to Github above, there is a need for friends, you can have a look. portal

The latter

Finally: don’t put everything in cookies, localStorage, and sessionStorage because the front end is so insecure. As long as open the console can be arbitrary to modify Cookie, localStorage and sessionStorage data. If money or other important information is involved, it is better to keep it in the background.

Finally: if you want to reprint, please put the original link and signed. Code word is not easy, thank you for your support! I write the article in line with the attitude of communication record, write the bad place, not quarrel, but welcome to give advice. Then I hope that after watching friends point like, can also follow me. Blog and digger’s personal home page

The above 2017.11.25

Reference links:

HTML 5 Web storage localStorage and sessionStorage details about Cookie, localStorage and sessionStorage