Web front-end interview Guide (43): Please describe the difference between cookies,sessionstorage and localstorage?

Topic CommentsThis is a relatively strong problem, you can first say their similarities, and then is to elaborate their differences, and different points do not deliberately to contrast, as long as the characteristics of their own, naturally their differences came out.
Solving method
Same point:are stored on the client
different points:
1. Storage size
The cookie data size cannot exceed 4k. Sessionstorage and Localstorage, though also limited in size, are much larger than cookies and can reach 5M or greater. 2. Effective time
Localstorage stores persistent data, the data is not lost after the browser is closed unless the data is actively deleted, and sessionstorage data is automatically deleted after the current browser window is closed. Cookie is set to expire before the cookie expires, even if the window or browser closes 3. How data interacts with the server
The cookie data is automatically passed to the server, and the server can write cookies to the client sessionstorage and Localstorage will not automatically send the data to the server, save locally.

----------------------------------------------------------------------------------------------------------- -----------------------------

additional "Add-ins": The operation of cookies (a little bit difficult) prevents the interviewer from wise cookies.

Set Cookies

several elements of cookies

Content of cookies: using Key=value;key=value ... Storage, Parameter name customization

Expiration time for cookies: Using parameters expires

Cookie path: Use parameter path, "/" to represent this site's page, not recommended! Conflict prone

Note: the form of "/pro/index.html" path, in Google Browser is normal, in IE browser can not get the value

examples of how cookies are represented

var name = "Jack";
var pwd = "123";
var now = new Date ();
Now.settime (Now.gettime () +1 * 24 * 60 * 60 * 1000);//Turn millisecond
var path = "/";//Can be specific Web page
document.cookie = "name=" + NA Me + "; expires=" + now.toutcstring () + ";p ath=" + path;//name
document.cookie= "pwd=" + pwd + "expires=" + NOW.TOUTCST Ring () + ";p ath=" + path; Password

Read Cookies

Get Cookie Content

vardata=document.cookie;//get the cookie for the corresponding page

Parsing cookies

Mode 1: Intercept string

function Getkey (key) {
    var data = Document.cookie;
    var findStr = key + "=";
    Location where key is found
    var index = data.indexof (FINDSTR);
    if (index = = 1) return
        null;
    var subStr = data.substring (index +findstr.length);
    var lastindex = Substr.indexof (";");
    if (lastindex = = 1) {return
        subStr;
 } else {return
        substr.substring (0,lastindex)
}}

Mode 2: Use regular expression +json

function Getkey (key) {return
    json.parse ("{\" +document.cookie.replace (/;\s+/gim, "\", \ ""). Replace (/=/gim, "\" : \ "") + "\"} ") [key];
}

Clear Cookies

var name = null;
var pwd = null;
var now = new Date ();
var path = "/";//Can be specific page
document.cookie= "name=" + name + "; expires=" + now.toutcstring () + ";p ath=" + path;//name
Document.cookie = "pwd=" + pwd + "; expires=" + now.toutcstring () + ";p ath=" + path; Password