JavaScript client-side storage

1. Foreword:

Client-side storage is actually the memory function of the web browser, which stores data to the hard disk through the browser’s API;

2. Different forms of storage:

1. Web storage: localStorage and sessionStorage Represents the same Storage object - the persistent index is a string, and the value is also an array of strings;

The two have different storage validity periods and scopes, and the others are basically common; and the scopes are all at the document source level. Cannot be accessed across domains;

LocalStorage: The stored data is permanent, and data is shared between documents of the same origin; data can be read or overwritten; but it is restricted by the browser;

sessionStorage: The scope is limited to windows or tabs Page, all data will be deleted after the tab is closed;

Both can be used as ordinary js objects, and set and obtain data through .key or [key]. The new browser also provides a formal API:

setItem (): Set the corresponding name and value, in the form of localStorage.setItem("x",1);

GetItem(): Pass in the name to get the corresponding value, in the form of: localStorage.getItem("x");

　RemoveItem(): Pass in the name and delete the corresponding data; clear(): Clear all stored data;

　key(): Used in conjunction with length to enumerate all names: for(var i=0;i

　2. Cookie: Cookie data is automatically transferred between the web browser and the web server, so the server script can read and write the cookie value stored on the client;

Cookie limitations: Each web server cannot save more than 20 cookies, each The data saved by the cookie cannot exceed 4kb;

//保存cookie:
function setCookie(name,value){
    //对value值进行表面,转义分号，逗号和空白符;
    var cookie = name+""+encodeURIComponent(value);
    cookie += "; max-age="+3000;//设置有效期 毫秒数;
    cookie += ";path=/";        //设置作用域路径
    cookie += ";domain="+domain;//作用域域名 只能是当前服务器的域;
    cookie += "; secure"; //设置此属性，则只有通过HTTPS或其他安全协议连接是才能传递cookie;
    
    document.cookie = cookie; //保存
}
//改变与删除cookie都要使用相同的名字、路径和域; 改变时,值设为新的; 删除时，设置max-age=0;
//读取所有cookie值
function getCookie(){
    var cookies = {};
    var all = document.cookie;
    if(all === ""){
        return cookies;
    }
    var list = all.split("; ");
    for(var i in list){
        var cookie = list[i];
        var p = cookie.indexOf("=");
        cookies[cookie.substring(0,p)] = decodeURLComponent(cookie.substring(p+1));
    }
    return cookies;
}　　　　　

3. Client database (html5): IndexedDB: an object database; new versions of Chrome and FireFox support;

4. File system (HTML5): can operate the local file system Read and write files and directories; currently only the new version of Chrome browser implements this;