WebStorage介绍

所谓的WebStorage指的是客户端存储,在这里指的是浏览器端存储,比如在网站上自动登陆这些功能,其实就是把一些少量的数据存储在浏览器等客户端中,这样可以减少没必要的请求到服务器,降低服务器的压力,给用户提供更好的体验.

WebStorage的三种存储方式

  1. cookie: 广泛使用 存储量4kb左右 会在浏览器和服务器间传递 一般由服务器端创建 可以设置存储时间(默认和session一样) cookie不容易操作 jquery.cookie.js插件

  2. session(会话)Storage: H5新增 存储量5M左右 只会在浏览器存储数据(浏览器的内存中) 只会由浏览器端创建 存储时间是打开浏览器开始关闭浏览器消失 方法简洁明了 容易操作

  3. local(本地)Storage: H5新增 存储量5M左右 只会在浏览器存储数据(存储在硬盘中) 只会由浏览器端创建 永久存储除非手动删除 方法简介明了 容易操作

localStorage

  1. 添加数据: window.localStorage.setItem(key,value);
  2. 获取数据: window.localStorage.getItem(key);
  3. 移除数据: window.localStorage.removeItem(key);
  4. 清除数据: window.localStorage.clear();
  5. 获取key: window.localStorage.key(n);

sessionStorage

  1. 添加数据: window.sessionStorage.setItem(key,value);
  2. 获取数据: window.sessionStorage.getItem(key);
  3. 移除数据: window.sessionStorage.removeItem(key);
  4. 清除数据: window.sessionStorage.clear();
  5. 获取key: window.sessionStorage.key(n从0开始);
  • 应用场景: 存储一些少量临时的数据(比较少用)

总结

  1. localStorage和sessionStorage只能存储json
  2. 存储的数据不能太多 太多浏览器会卡