web本地存储技术-cookie、sessionStorage和localStorage

1.cookie

　　存储在用户本地终端上的数据，会随请求发送到服务器端，常见用法是存储用户登录成功后的密码，以便判别用户的登录状态和身份。浏览器端可用javascript来操作cookie，通过document.cookie对cookie中的数据进行存取操作，在存储时可设置路径(path)和有效时长(expires)。cookie在过期时间之前一直有效，即使窗口和浏览器关闭；若不设置expires，则默认有效时间截止到关闭浏览器；若要删除cookie，可将expires设置为过去的时间。为了方便操作cookie中的数据，可封装成set、get和delete三个方法，javascript示例代码如下：

/** 
 *  @Desc: Cookie方法的封装
 *  @param: timeStr d 结尾表示天数
 *               h 结尾表示小时
 *               m 结尾表示分钟
 **/
export default {
  set: function (key, val, timeStr) {//设置cookie方法
    try {
      if (timeStr) {
        var date = new Date(); //获取当前时间
        var time = parseInt(timeStr.substring(0, timeStr.length - 1));
        // var expiresDays = time;  //将date设置为n天以后的时间
        switch (timeStr.charAt(timeStr.length - 1).toLowerCase()) {
          case 'd':
            time *= 24 * 3600 * 1000;
            break;
          case 'h':
            time *= 3600 * 1000;
            break;
          case 'm':
            time *= 60 * 1000;
            break;
          default:
            break;
        }
        date.setTime(date.getTime() + time); //格式化为cookie识别的时间
        document.cookie = key + "=" + val + ";expires=" + date.toGMTString();  //设置cookie
      } else {
        document.cookie = key + "=" + val;  //设置cookie
      }
    } catch (e) {
      console.error(e.message);
    }
  },
  get: function (key) {//获取cookie方法
    /*获取cookie参数*/
    var getCookie = document.cookie.replace(/[ ]/g, "");  //获取cookie，并且将获得的cookie格式化，去掉空格字符
    var arrCookie = getCookie.split(";");  //将获得的cookie以"分号"为标识 将cookie保存到arrCookie的数组中
    var tips;  //声明变量tips
    for (var i = 0; i < arrCookie.length; i++) {   //使用for循环查找cookie中的tips变量
      var arr = arrCookie[i].split("=");   //将单条cookie用"等号"为标识，将单条cookie保存为arr数组
      if (key == arr[0]) {  //匹配变量名称，其中arr[0]是指的cookie名称，如果该条变量为tips则执行判断语句中的赋值操作
        tips = arr[1];   //将cookie的值赋给变量tips
        break;   //终止for循环遍历
      }
    }
    return tips;
  },
  delete: function (key) { //删除cookie方法
    var date = new Date(); //获取当前时间
    date.setTime(date.getTime() - 10000); //将date设置为过去的时间
    document.cookie = key + "=v; expires =" + date.toGMTString();//设置cookie
  }
};

2. sessionStorage和localStorage

sessionStorage和localStorage是HTML5提供本地存储数据的两个新方法，只保存在客户端(即浏览器)，不参与和服务器之间的通信。这两种存储技术的使用方法相同，都有保存setItem、获取getItem、删除removeItem、清空clear等方法。

sessionStorage.setItem("userName", "Tom");    //设置
sessionStorage.getItem("userName");    //获取
sessionStorage.removeItem("userName");    //删除
sessionStorage.clear();    //清空

 

3. cookie、sessionStorage和localStorage的异同(都遵循同源策略)

共同点：都是保存在浏览器中，且是同源的。

不同点：

• 参与方式：cookie数据始终在同源的http请求中携带(即使不需要)，即在浏览器和服务器之间来回传递；cookie数据还有路径path概念，可将cookie限制在某一路径下。 而sessionStorage和localStorage只保存在本地，不参与客户端和服务器端之间的通信。
• 存储大小：cookie最多只能存储4KB大小的数据，因为每次http请求都会携带，所以不适合存放大量的数据。而sessionStorage和localStorage存储的数据要比cookie大很多，可以达到5MB或更大。
• 数据有效期不同：cookie，若不设置expires，则在关闭浏览器后失效；若设置expires，则在有效时间过期之前一直有效，即使浏览器关闭。sessionStorage中的数据只在浏览器当前选项卡中有效，一旦关闭则立刻失效。localStorage中的数据一直有效，直到手动删除或清空。

 参考文章链接：

cookie、 sessionStorage 、localStorage之间的区别和使用