localStorage sessionStorage和cookie对比

主要特点

都是由于存储数据 以键值对形式存储

• cookie : 适合保存较小的数据 如登录信息 用户信息之类的

• localStrorage: 适合持久化数据

• sessionStroeage: 适合一次性临时数据

存储容量

• cookie : 译名小甜饼，容量小，4KB

• localStrorage: 4.98M 不同浏览器不同 （safari 2.49M） HTML5引入

• sessionStroeage: 4.98M 部分浏览器没有限制 HTML5引入

生命周期

• cookie：

  • 默认保存内存中 一般是服务端产生 浏览器关闭时失效
  • 设置过期时间时，过期后就会失效

• localStrorage: 理论上永久有效，设置了就不会失效，除非主动清除

• sessionStroeage: 仅在当前网页会话，关闭页面或浏览器后会被清除

存储位置及通信

• cookie :

  • 一般由服务器产生，携带在HTTP响应头中 存储数据过多会影响性能
  • 保存在客户端 每次请求都会带上

• localStrorage: 保存在客户端 ，不与服务端交互，节省网络流量

• sessionStroeage: 保存在客户端 ，不与服务端交互，节省网络流量

使用

• localStorage 与 sessionStorage

localStorage.setItem("name", "value");
localStorage.getItem("name"); // => 'value'
localStorage.removeItem("name");
localStorage.clear(); // 删除所有数据

sessionStorage.setItem("name", "value");
sessionStorage.setItem("name");
sessionStorage.setItem("name");
sessionStorage.clear();

• cookie简单用法

  • 添加

    Cookie c = new Cookie("username","peter");// 新建一个Cookie对象
    c.setMaxAge(24*60*60);                    // 设置过期时间1天，以秒为单位
    response.addCookie(c);                    // 保存cookie到客户端
    

  • 删除 覆盖

    Cookie cookie = new Cookie("username","peter");// 新建Cookie
    cookie.setMaxAge(0);                           // 设置生命周期为0，表示将要删除
    response.addCookie(cookie);                    // 执行添加后就从response里删除了
    

  • 修改

    Cookie cookie = new Cookie("username","joker");// 新建Cookie
    cookie.setMaxAge(24*60*60);                    // 设置生命周期
    response.addCookie(cookie);                    // 执行添加后就从response里覆盖修改了