SimpleDao

Cookie

简介

在 HTML5 之前,本地存储数据一般是通过 Cookie 来完成。我们可以把 Cookie 理解为一个长度有限的字符串,服务端和客户端都能读写这个字符串,并且每次请求时,都会把 Cookie 发送到服务端

使用场景

通常,我们可以利用这个字符串来保存记录用户登录状态的sessionid,这样登录之后服务端就能根据sessionid识别用户是否已经登录以及登录的是哪个用户。

局限性:

  • 存储空间有限,最多也就是几十K的大小
  • 每次请求都发送到服务器,浪费带宽

本地存储(LocalStorage)

本地存储(LocalStorage)是一种基于键值对的持久化存储方案,如果不手动清除,数据就永远不会过期,请求服务器的时候不会发送到服务端,提高请求速度。

种类

  • LocalStorage
    • 没有时间限制的数据存储
    • 存储数据量达到几MB(5MB),各个浏览器不一致
    • 在所有同源窗口中都是共享
    • 本质是在读写文件,数据多的话会比较卡
    • IE7及以下不支持外,其他标准浏览器都完全支持
    • 不用每次请求都发送到服务器,提高请求速度
  • SessionStorage
    • 针对一个 session 的数据存储
    • 存储数据量达到几MB(5MB),各个浏览器不一致
    • 仅在当前浏览器窗口关闭前有效(适合会话验证)
    • 不在不同的浏览器窗口中共享,即使是同一个页面

LocalStorage 和 SessionStorage 功能类似,区别仅仅在于数据保存时间不同。

  • LocalStorage 是持久存储,如果不手动清除,数据就永远不会失效
  • SessionStorage 的数据存储在窗口对象中,一旦窗口对象没了(用户关闭浏览器或标签页),数据就会丢失

基本操作

保存数据

  1. window.localStorage.setItem("key1", "value");
  2. window.sessionStorage.setItem("key1", "value");

获取数据

  1. var v = window.localStorage.getItem("key1");
  2. var v = window.sessionStorage.getItem("key1");

删除数据

  1. window.localStorage.removeItem("key1");
  2. window.sessionStorage.removeItem("key1");

删除所有数据

  1. window.localStorage.clear();
  2. window.sessionStorage.clear();

简洁操作

web Storage可以像普通对象一样用点(.)操作符,及[]的方式进行数据存储。

  1. window.localStorage.key1 = "hello";
  2. window.localStorage["key1"] = "world";

遍历key

  • localStorage.length:获得存储的键值对的个数
  • localStorage.key(n):获得存储的第 n 个元素对的键值
  1. var storage = window.localStorage;
  2. for (var i=0, len=storage.length; i<len; i++){
  3. var key = storage.key(i);
  4. var value = storage.getItem(key);
  5. console.log(key + "=" + value);
  6. }

事件

当键值改变或者clear的时候,就可以触发storage事件,如设置一个storage事件改变的监听:

  1. if (window.addEventListener) {
  2. window.addEventListener("storage", handleStorage, false);
  3. } else if (window.attachEvent) {
  4. window.attachEvent("onstorage", handleStorage);
  5. }
  6. function handleStorage(e) {
  7. if (!e) {
  8. e=window.event;
  9. }
  10. }

应用

  • 保存一些用户配置,比如小说站点的字体大小,最近阅读,背景色等
  • 在线编辑器的临时结果保存
  • 但是不能保存用户敏感信息,比如密码等,因为可以通过浏览器查看到这些保存的信息,比如使用Chrome,按F12 -> Application -> Local Storage
  • 而且因为是本地存储,用户随时可能清除掉数据,所以不能太过依赖