JavaScript--Data storage

Cookies

A Web application transmits data using the HTTP protocol. The HTTP protocol is a stateless protocol.

Once the data has been exchanged, the client-to-server connection is closed, and exchanging the data again requires establishing a new connection. This means that the server is unable to track the session from the connection.

That is, user a purchases a product into the shopping cart, and when the product is re-purchased, the server is unable to determine whether the purchase is a session of user A or User B. To track this session, you must introduce a mechanism.

Cookies are such a mechanism. It can compensate for the lack of HTTP protocol stateless. Before the session, basically all websites use cookies to track conversations.

Therefore, the cookie is passed back and forth between the server and the client with the HTTP request.

A Cookie is some data that is stored in a text file on your computer.

The Cookie is stored as a name/value pair as follows:

name=adoctors

Create a cookie using JavaScript

document.cookie="name=adoctors";

You can also add an expiration time (in UTC or GMT) to the cookie. By default, cookies are deleted when the browser is closed:

document.cookie="name=adoctors; expires=Thu, 18 Dec 2018 12:00:00 GMT";

Using JavaScript to read cookies

var x = document.cookie;

Using JavaScript to modify cookies

In JavaScript, modifying a cookie is similar to creating a cookie, and the old cookie will be overwritten.

Delete cookies using JavaScript

Deleting cookies is very simple. You only need to set the expires parameter to the previous time

document.cookie = "name=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

For ease of use, the method is encapsulated as follows:

function setCookie(name,val,day){    var time=new Date();    time.setTime(time.getTime()+day*24*60*60*1000);    document.cookie=name+"="+val+";expires="+time.toGMTString();}function getCookie(name){    var arr=document.cookie.split(";");    for(var i=0;i<arr.length;i++){        arr[i]=arr[i].replace(/^\s*|\s*$/,"");        if(arr[i].indexOf(name+"=")==0){            return arr[i].substring(name.length+1)        }    }}function clearAllCookie(){    var str=document.cookie.match(/[^=;]+(?==)/g);    for(var i=0;i<str.length;i++){        str[i]=str[i].replace(/^\s*|\s*$/,"");        document.cookie=str[i]+"=0;expires=Wed Jan 04 2000 15:45:56 GMT"    }}

The drawbacks of cookies are mainly focused on security and privacy protection, including the following:

• Cookies may be disabled by the user
• Cookies stored between browsers cannot be accessed when the same page is accessed by a different browser
• Each cookie is a file that exists on the client's hard disk and may be deleted
• Cookie security is not high enough and all cookies are recorded in a file in plain text form

Sessionstorage & Localstorage

localStorageFor long-term preservation of the entire site's data, the saved data has no expiration time until manually removed.

sessionStorageUsed to temporarily save data for the same window (or tab), which will be deleted after closing the Window or tab page.

Whether it is localstorage, or sessionstorage, can use the same API, commonly used are the following (in the case of Localstorage):

Save data: Localstorage.setitem (Key,value);

Read data: Localstorage.getitem (key);

Delete individual data: Localstorage.removeitem (key);

Delete all data: Localstorage.clear ();

Get the Key:localStorage.key (index) of an index;

Such as:

sessionStorage.setItem(‘bindingType‘,‘wechat‘);sessionStorage.getItem(‘topicRes‘)localStorage.setItem(‘province‘, JSON.stringify(res.data.data));localStorage.getItem("province")

Benefits compared to cookies

• No need to install additional plugins
• Storage space up to 5MB (cookies only 4kb)
• Simple operation

Note: Any format store is automatically converted to a string, so note the format conversion when reading.

JavaScript--Data storage