八、前端开发-JavaScript 客户端存储

八、前端开发语言体系-JavaScript 客户端存储

JavaScript 客户端存储

客户端存储简介

在前端开发过程中，为了与服务器更方便的交互或者提升用户体验，我们都会在客户端（用户）本地保存一部分数据。Web应用允许使用浏览器提供的 API 实现将数据存储到用户的电脑上。

客户端存储的方案：

传统：

• Cookie：把信息存储到客户端的浏览器中（但是项目服务器端也是可以获取COOKIE的）
• Session：把信息存储到服务器上的（服务器存储）

HTML5：WebStorage

• LocalStorage：永久存储在客户端的本地
• SessionStorage：信息的会话存储，会话窗口存在信息也存在，会话窗口关闭信息就消失了（针对 Session 的数据存储）

我们可以认为，传统的 Session 存储会被 SessionStorage 所替代，这里不再对它进行介绍。

Cookie

Cookie是指Web浏览器存储的少量数据，用于浏览器存储会话信息，每个Cookie的大小一般不能超过4KB。cookie默认的有效期很短暂，它只能持续在Web浏览器的会话期间，一旦用户关闭浏览器，cookie保存的数据就会丢失。

Cookie保存以下几方面的信息：

• Cookie的名字
• Cookie的值
• 到期时间
• 所属域名（默认是当前域名）
• 生效的路径（默认是当前网址）

Cookie的值必须写成“key=value”的形式，等号两边不能有空格。而且在写入Cookie的时候，必须对分号、逗号和空格进行转义（它们都不允许作为Cookie的值）。

document.cookie属性是可写的，可以通过它为当前网站添加Cookie。document.cookie一次只能写入一个Cookie，这个写入并不是覆盖，而是添加。

如果要延长cookie的有效期，就需要设置max-age属性来指定cookie的有效期（单位是秒）

document.cookie = 'test1=hello'; 
document.cookie = 'test2=world'; 
document.cookie = 'user=TG;max-age=606024';  //将有效期设置为一天 

document.cookie     //读取当前页面的所有cookie 

// test1=hello; test2=world; user=TG 

除了Cookie本身的内容，还有一些可选的属性也是可以写入的，它们都必须以分号分隔。

Set-Cookie: value[; expires=date][; domain=domain][; path=path][; secure][; max-age=number]

• value属性
  • value属性是必需的。它是一个键值对，用于指定Cookie的值
• expires属性
  • expires属性用于指定Cookie过期时间。如果不设置该属性，或者设为null，Cookie只在当前会话有效，浏览器窗口一旦关闭，该Cookie就会被删除。
• domain属性
  • domain属性指定Cookie所在的域名。如果未指定，默认为设定该Cookie的域名，所指定的域名必须是当前发送Cookie的域名的一部分。
  • 只有访问的域名匹配domain属性，Cookie才有可能发送到服务器。
• path属性
  • path属性用来指定cookie存储路径，必须是绝对路径，如果未指定，默认为请求该Cookie的网页路径。
  • path属性生效的前提是domain属性匹配。只有path属性匹配向服务器发送的路径，Cookie才会发送。（这里的匹配不是绝对匹配，而是从根路径开始，只要path属性匹配发送路径的一部分，就可以发送。）
• secure属性
  • secure属性用来指定Cookie只能在加密协议HTTPS下发送到服务器。
  • 该属性只是一个开关，不需要指定值。如果通信是HTTPS协议，该开关自动打开。
• max-age属性
  • max-age属性用来指定Cookie有效期，以秒为单位。

浏览器对Cookie数量的限制，规定不一样。目前，Firefox是每个域名最多设置50个Cookie，而Safari和Chrome没有域名数量的限制。

所有Cookie的累加长度限制为4KB。超过这个长度的Cookie，将被忽略，不会被设置。

Cookie实例：

function setCookie(cname, cvalue, exdays) {
    //创建cookie，三个参数分别为：键、值、保存的天数
    var d = new Date();
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
    var expires = "expires="+d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
    //查找键为“cname”的cookie
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
         }
        if (c.indexOf(name)  == 0) {
            return c.substring(name.length, c.length);
         }
    }
    return "";
}
function delCookie(cname){
    //删除键为“cname”的cookie
    /*删除 cookie 非常简单，不必指定 cookie 值，
    直接把 expires参数设置为过去的日期即可*/
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval=getCookie(name);
    if(cval!=null)
        document.cookie= cname + "="+cval+";expires="+exp.toGMTString();
}

setCookie("name","bolly",10);
getCookie("name");
delCookie("name");

LocalStorage

优势：

1. LocalStorage 拓展了 Cookie 的 4K 限制，这个相当于一个 5M 大小的针对于前端页面的数据库，相比于 Cookie 可以节约带宽。
2. LocalStorage用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。

局限:

1. 只有在高版本的浏览器中才支持 LocalStorage，比如 IE 浏览器只有 IE8 以上才进行支持。
2. 目前所有的浏览器中都会把 LocalStorage 的值类型限定为 String 类型，这个在对我们日常比较常见的 JSON 对象类型需要一些转换。
3. LocalStorage在浏览器的隐私模式下面是不可读取的。
4. LocalStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡。
5. LocalStorage不能被爬虫抓取到。

LocalStorage 的使用也是遵循同源策略的，所以不同的网站是不能共用相同的 LocalStorage。

LocalStorage创建的是一个本地存储的 name/value 对，写入和读取各自有三种方式，官方推荐使用 setItem\getItem 这两种方法对其进行存取。

//写入
localStorage.setItem('user',101);//存储一个以“user”为名字的值
localStorage["user"] = 101;
localStorage.user = 101;

//读取
localStorage.getItem('user');  //读取以“user”为名字的值
localStorage["user"]
localStorage.user

建立了 LocalStorage 数据之后，我们可以使用 removeItem( ) 和 clear( ) 方法来删除。

localStorage.removeItem('user');//删除名为“user”的数据。
localStorage.clear();           //删除所有存储的数据

LocalStorage 中有一个 key( ) 方法可以根据索引获取到当前的键值，一般用于遍历存储数据。

for(var i=0; i < localStorage.length; i++){ 
    var name = localStorage.key(i);  //获取第 i对的名字 
    var datas = localStorage.getItem(name); //获取该对的值
}

因为 LocalStorage 存储的是 String 对象，如果我们想把 JSON 对象存入的话必须进行转换。

• JSON.stringify( ) 方法可以将 JSON 对象转换成为 JSON 字符串
• JSON.parse( ) 方法可以将 JSON 字符串转换成为 JSON 对象

var storage = window.localStorage;
var person = {
    name:'xiecanyong',
    sex:'man',
    hobby:'program'
};

var data = JSON.stringify(person);
storage.setItem("user",data);

var jsons=storage.getItem("data");
var jsonObj=JSON.parse(jsons);

SessionStorage

Storage对象是一个持久化关联数组，数组使用字符串来索引，存储的值都是字符串形式的。LocalStorage和SessionStorage这两个属性都代表同一个Storage对象。

LocalStorage和SessionStorage的区别在于存储的有效期和作用域的不同。

• LocalStorage存储的数据是永久性的，除非主动删除，否则数据一直留在用户的电脑中。
• LocalStorage的作用域是限定在文档源（document origin）级别。同源的文档间共享同样的localStorage数据。
• SessionStorage用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
• SessionStorage的作用域同样是限定在文档源中，不过它被限定在窗口中。也就是说，如果同源的文档在不同的浏览器标签页中，那它们互相之间拥有的是各自的SessionStorage数据，无法共享。如果一个浏览器标签页包含多个元素，它们包含的文档是同源的，两者之间的SessionStorage是可共享的。

SessionStorage 的用法和 LocalStorage 完全一致，参照 LocalStorage 进行使用即可。

参考文章

js基础-客户端存储（Cookie、Storage、IndexedDB）

基于js 本地存储(详解)

W3School-JavaScript Cookies

前端开发的客户端本地存储

Window localStorage 属性