关于html5存储localStorage,sessionStorage以及Cookie

LocalStorage

  • 是对Cookie的优化
  • 没有时间限制的数据存储
  • 在隐私模式下不可读取
  • 大小限制在500万字符左右,各个浏览器不一致
  • localStorage的大小一般限定为4M左右
  • 在所有同源窗口中都是共享的
  • 本质是在读写文件,数据多的话会比较卡(firefox会一次性将数据导入内存)
  • 不能被爬虫爬取,不要用它完全取代URL传参
  • IE7及以下不支持外,其他标准浏览器都完全支持
  • 如果有一些数据,服务器难以承载其压力,但又要与用户的信息绑定的话,可以使用localStorage存储一些状态,这样即能缓解服务端压力,也可以存储用户的数据
  • 存储的值需要是字符串类型,没法直接存储对象,但是可以将对象序列化为字符串再存入。
获取键值:localStorage.getItem(“key”)
设置键值:localStorage.setItem(“key”,”value”)
清除键值:localStorage.removeItem(“key”)
清除所有键值:localStorage.clear()
获取键值2:localStorage.keyName
设置键值2:localStorage.keyName = “value”

JQ下的操作方法:
获取键值:window.localStorage.getItem(“key”)
设置键值:window.localStorage.setItem(“key”,”value”)
清除键值:window.localStorage.removeItem(“key”)
清除所有键值:window.localStorage.clear()
获取键值2:window.localStorage.keyName
设置键值2:window.localStorage.keyName = “value”

  

SessionStorage

  • 针对一个 session 的数据存储
  • 大小限制在5M左右,各个浏览器不一致
  • 仅在当前浏览器窗口关闭前有效(适合会话验证)
  • 不在不同的浏览器窗口中共享,即使是同一个页面
  • 建议存储一些当前页面刷新需要存储,且不需要在tab关闭时候留下的信息。

Cookie

  • cookie机制将信息存储于用户硬盘,因此可以作为全局变量
  • 现代浏览器cookie个数不要超过50条,大小不能超过4KB
  • cookie不要保存机密信息,让服务端来确保用户信息安全。
  • cookie每次随HTTP请求一起发送,浪费宽带,移动端推荐使用localStorage。
  • 建议存储一些同步访问页面的时候必须要被带到服务端的信息。
$.cookie = {
    set: function(name, value, exp) {
        var Days = 30;
        var _exp = new Date();
        _exp.setTime(_exp.getTime() + Days * 24 * 60 * 60 * 1000);
        document.cookie = name + "=" + escape(value) + ";expires=" +
            (exp || _exp).toGMTString();
    },
    get: function(name) {
        var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
        if (arr = document.cookie.match(reg))
            return unescape(arr[2]);
        else
            return null;
    },
    del: function(name) {
        var exp = new Date();
        exp.setTime(exp.getTime() - 1);
        var cval = this.get(name);
        if (cval != null)
            document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
    }
};
原文地址:https://www.cnblogs.com/nerrol/p/8182801.html