js 本地缓存localStorage和sessionStorage 还有cookie 用法和区别

一、定义和使用
localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。

localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。

sessionStorage 数据保存在当前会话中，该数据对象临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

保存数据语法
localStorage.setItem(“key”, “value”);
sessionStorage .setItem(“key”, “value”);

读取数据语法：
var lastname = localStorage.getItem(“key”);
var lastname = sessionStorage .getItem(“key”);

删除数据语法：
localStorage.removeItem(“key”);
sessionStorage .removeItem(“key”);

下面写个方法把两个封装一起方便开发使用的示例

var SaveData=function(){};
 SaveData.prototype={
 /**保存数据到本地
     * 参数 k
     * 参数 v
     * 参数 flag  为true时表示是sessionStorage保存，其他则为localStorage保存
     */
    storageSaveData:function(k,v,flag){
        if(flag==true){
            sessionStorage.setItem(k,v);
            return true;
        }
        localStorage.setItem(k,v);
        return true;
    },
    /**
     * 获取本地数据
     * 参数  k
     * 参数  flag
     */
    storageGetData:function(k,flag){
        if(flag==true){
            return sessionStorage.getItem(k);
        }
        return localStorage.getItem(k);
    },

    /**
     * 清除本地数据中的值
     * 参数  flag
     * 参数  k
     * returns {boolean}
     */
    storageClearData:function(flag,k){
        if(flag==true){
            if(checkTool.validVar(k)){
                sessionStorage.removeItem(k);
            }else{
                sessionStorage.clear();
            }
            return true;
        }

        if(checkTool.validVar(k)){
            localStorage.removeItem(k);
        }else{
            localStorage.clear();
        }
        return true;
    },

}

var SaveData=new SaveData();

二’ cookie

cookie属于较老且最常见用的最多的技术了，cookie的优点很多，但是缺点也很多：

注意：本地存储一般是明文存储，对于重要的信息不要直接存储在本地，如果非要存储的话，记得要对存储的信息进行加密。

加密方法

a.可逆转加密（一般都是自己来设置自规则）
b.不可逆转加密：（一般都是基于MD5来进行加密，可能会把MD5加密后的数据二次加密）

实际项目中本地缓存都能来存储什么？

cookie：记住用户名密码以便下次自动登录等等：当用户登录成功后，存储用户的部分信息，便可以在项目的任何页面知道当前的用户是谁了。

storage：存储一些不容易过期的数据（如从api接口中接收的用于渲染页面的数据），在存储时一般加入一个存储时间(time:Date.now()),以便在下次

刷新页面的时候判断存储的事件有没有超过预定的时间；也可以用来存储一些页面的源代码，比如css样式或者html等等（有必要的时候需要来结合前台的数据）；

希望对大家有所帮助，你们的支持是我最大的动力；

1. cookie兼容所有的浏览器，但其存储的数据是有大小限制的，一般同源是4kb；
2. cookie本地存储的数据会被发送到服务器（所以建议在服务器环境下使用cookie）；
3. 跨域访问问题；浪费带宽等等；
4. 存在浏览器不支持的情况：chrome不支持，其他市面上的主流浏览器基本都支持
   所以：在使用cookie前，先确认浏览器支不支持cookie，检查当前浏览器是否支持或者禁用了cookie，代码如下：

5. var dt = new Date();
   dt.setSeconds(dt.getSeconds() + 60);
   document.cookie = "cookietest=1; expires=" + dt.toGMTString();
   var cookiesEnabled = document.cookie.indexOf("cookietest=") != -1;
   if(!cookiesEnabled){
       //没有启用cookie
       alert("没有启用cookie ");
   }else{
       //已经启用cookie
       alert("已经启用cookie ");
   }
   

   在js的脚本中，cookie实际上是document的一个字符属性，当你读取cookie的值时，得到的是一个字符串，里面的是当前web存放的所有的cookie的name,value,除此之外，
   每一个cookie除了有name，value，还有其他四个属性：expires过期时间,path路径，domain域以及secure安全等。
   cookie中存储的数据，如果没有设置有效期的话，浏览器关闭的时候就会被清空（并非关系选项卡）

   cookie的区分是以域名的方式。

   cookie的用法：以键值对的方式来存储数据（key：value形式）,一个域名下能存储的cookie个数是不同的，具体的看浏览器的支持性了

   当一个域名下有多个cookie时，输出document.cookie时输出的是当前域名下的所有cookie，cookie之间以分号加空格的形式隔开

   存储格式：document.cookie=“name=[;expires=][;domain=][;secrue]”

   普通的存储数据如下：

     document.cookie = "id=18";
       document.cookie = "name=liangye";
       alert(document.cookie); //id=18; name=liangye 由于没有设置有效期expires,浏览器关闭后会自动来清理cookie（并非关闭标签）
   

   三.cookie和storage的区别

6. cookie兼容所有的浏览器（本地cookie谷歌不支持），storage不支持IE6~8;
7. 二者对存储的内容均有大小限制，前者同源情况写一般不能存储4kb的内容，后者同源一般能存储只能存储5MB的数据
8. cookie有过期时间，localStorage是永久存储（如果你不手动去删除的话）
9. 一些浏览器处于安全的角度可能会禁用cookie,但无法禁用localStorage