Cookie、webStorage-CSDN博客

Cookie:

语法：document.cookie = "key1=value1;key2=value"

Cookie可以把数据以键值对的方式把数据保存在电脑上的文本文件中。
expires参数可以设置cookie的有效时间，如果不设置则默认为浏览器关闭时删除记录。

自动动手写两个函数对cookie进行读写数据

function setCookie(key, name, validDay) {//第三个参数为cookie的有效时间  
    var d = new Date();  
    d.setTime(d.getTime() + validDay * 24 * 60 * 60 * 100);  
    var expires = 'expires=' + d.toGMTString();  
    document.cookie = key + "=" + name + ";" + expires;
}

function getCookie(key) {  
    var list = document.cookie.split(';');//以分号截断cookie中保存的字符串  
    for (var i = 0; i < list.length; i++) {    
        var value = list[i].trim();//去除两边的空格    
        if (value.valueOf(key) === 0) {      
            return value.substring(key.length + 1, value.length);    
        }  
    }
}
复制代码

WebStorage

localStorage&&sessionStorage:

localStorage和sessionStorage的用法完全一模一样，而不同的只有是保存的时间长短不一样：

localStorage是除非主动删除，否则数据会永久存在；而sessionStorage的话是只在本次会话中有效，也就是说页面关闭后也就没有了。

要使用webStorage首先要判断浏览器是否支持

//localStorage
if(window.localStorage){
    return ture;
}else{
    return false;
}

//sessionStorage
if(window.sessionStorage){
    return true;
}else{
    return false;
}

操作webStorage的方法：
setValue：setItem(key, value)
getValue：getItem(key)
removeData：removeItem(key)
getKey：key(index)
clearAll：clear()复制代码

Cookie和WebStorage的异同

显而易见的，webStorage提供了基本的操作方法，而cookie则需要开发者自己封装setCookie、getCookie。

webStorage和cookie都可以作为本地持久化存储使用，区别是他们的容量设计不一样，每个cookie最大不能超过4096字节，这就决定了cookie为大容量的本地存储工作。

cookie会在每次请求一个新页面的时候cookie都会被发送过去，这样会浪费带宽；cookie还需要指定作用域，不可以跨域调用。但是cookie是不可或缺的，cookie的作用是与如无其进行交互，作为http规范的一部分而存在，而webStorage的出现仅仅是为了解决cookie的小容量这一局限性而设计，真正的为了本地"存储"数据而生。

Cookie的利弊优缺点

先抑···

cookie虽然在持久保存客户端数据提供了方便，分担了服务器的负担，但还是有很多局限性的

每个特定域名下最多生成20个cookie
1、IE6或更低版本最多20个cookie
2、IE7和之后的版本最后可以有50个cookie
3、firefox最多50个cookie
4、chrome和safari没有做硬性限制
IE和Opera会清理近期最少使用的cookie，firefox会随机清理cookie
cookie最大能保存4096字节，为了兼容性，一般不超过4095字节，超出的长度会被截掉。
安全性问题。如果cookie被拦截了，session中的所有信息都将会被盗取。只要把cookie原样转发就可以获取所有信息，加密了也没有用，因为cookie的意义不需要知道。

后扬···

极高的拓展性和可用性