Shulou(Shulou.com)06/01 Report--

In this article, the editor introduces in detail "what are the differences between cookie, sessionstorage and localstorage data storage" with detailed content, clear steps and proper handling of details. I hope that this article "what is the difference between cookie, sessionstorage and localstorage data storage" can help you solve your doubts.

There are usually three ways we store data.

Cookie sessionstorage localstorage, what does the storage of these three kinds of data have to do with it? Let's take a look at it.

Cookie: save cookie values:

Var dataCookie='110'; [xss_clean] = 'token' + "+ dataCookie

Gets the cookie value of the specified name:

Function getCookie (name) {/ / get the cookie value of the specified name / / (^ |) name= ([^;] *) (; | $), match [0] is the string that matches the entire regular expression, and match [I] captures the array matching for the regular expression. Var arr = [xss_clean] .match (new RegExp ("(^ |)" + name+ "= ([^;] *) (; | $)"); if (arr! = null) {console.log (arr); return unescape (arr [2]);} return null;} var cookieData=getCookie ('token'); / / cookie is assigned to the variable.

Set the cookie expiration time:

Function setTime () {/ / stores cookie values and sets cookie expiration time var date=new Date (); var expiresDays=10;// sets ten-day expiration date.setTime (date.getTime () + expiresDays*24*3600*1000); [xss_clean] = "userId=828; expires=" + date.toGMTString (); console.log ([xss_clean], 'store cookie values and set cookie expiration time');}

Delete cookie:

Function delCookie (cookieName1) {/ / delete cookievar date2=new Date (); date2.setTime (date2.getTime ()-10001); / / set the time to the past time, automatically delete [xss_clean] = cookieName1+ "= v; expires=" + date2.toGMTString (); console.log ([xss_clean], 'delete cookie');} delCookie (' userId')

LocalStorage and sessionStorage:localStorage and sessionStorage use the same method, with sessionStorage as the chestnut:

Var name='sessionData';var num=120;sessionStorage.setItem (name,num); / / Storage data sessionStorage.setItem ('value2',119); let dataAll=sessionStorage.valueOf (); / / get all data console.log (dataAll,' gets all data'); var dataSession=sessionStorage.getItem (name); / / get specified key name data var dataSession2=sessionStorage.sessionData;//sessionStorage is a js object. You can also use key to get the value console.log (dataSession,dataSession2,' gets specified key name data') SessionStorage.removeItem (name); / / Delete specified key name data console.log (dataAll,' gets all data 1'); sessionStorage.clear (); / / clear cache data: localStorage.clear (); console.log (dataAll,' gets all data 2')

The similarities and differences of the three:

The use of the above is good, and the following is the difference between the three. In fact, many big companies will ask this question during the interview, so you can pay attention to the difference between them.

Life cycle:

Cookie: the expiration time can be set. If it is not set, it will expire when the browser is closed by default.

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

SessionStorage: valid only in the current web session, it will be cleared after closing the page or browser.

Storage data size:

Cookie:4KB or so

LocalStorage and sessionStorage: you can save information about 5MB.

Http request:

Cookie: it is carried in the HTTP header every time. If you use cookie to save too much data, it will cause performance problems.

LocalStorage and sessionStorage: save only in the client (that is, the browser) and do not participate in communication with the server

Ease of use:

Cookie: it needs to be encapsulated by the programmer, and the source Cookie interface is not friendly.

LocalStorage and sessionStorage: the source interface can be accepted or re-encapsulated to provide better support for Object and Array

Application scenarios:

In terms of security, because each http request carries cookie information, which virtually wastes bandwidth, cookie should be used as little as possible. In addition, cookie also needs to specify a scope, which cannot be called across domains, with more restrictions. But cookie is more useful than stprage when it comes to identifying user logins. In other cases, you can use storage, just storage.

Storage killed cookie in terms of the size of the data stored, and now basically cookie is rarely used, because bigger is always better, , you know.

The only difference between localStorage and sessionStorage is that it is permanently stored in the browser, and the other is that it clears the information by closing the web page. LocalStorage can be used to boast that the page passes parameters, and sessionStorage is used to save some temporary data to prevent users from losing some parameters after refreshing the page.

Browser support:

LocalStorage and sessionStorage are new features of html5, which may not be supported by some browsers. Note here.

The browser support for cookie was not found. You can use the following code to determine whether the browser you are using supports cookie:

If (navigator.cookieEnabled) {alert ("your browser supports cookie"); / / prompt the browser to support cookie} else {alert ("your browser does not support cookie"); / / prompt the browser not to support cookie}

Copy code data storage: Cookie, localStorage, sessionStorage data storage

Outside: limit the size and number of Cookie in each browser.

After reading this, the article "what is the difference between cookie, sessionstorage and localstorage data storage" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it before you can understand it. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.