ES5进阶-存储

一、存储介绍

前端开发的时候，因为功能需求，有些数据需要持久化的存储。这就涉及到了前端的数据存储

存储方式：

• Cookie
• 本地存储sessionStorage
• 本地存储localStorage
• web SQL
• indexedDB

二、Cookie

• 前言

  网络早期最大的问题之一是如何管理状态。简而言之，服务器无法知道两个请求是否来自同一个浏览器。当时最简单的方法是在请求时，在页面中插入一些参数，并在下一个请求中传回参数。这需要使用包含参数的隐藏的表单，或者作为URL参数的一部分传递。这两个解决方案都手动操作，容易出错。cookie出现来解决这个问题

• 作用

  cookie是纯文本，没有可执行代码。存储数据，当用户访问了某个网站（网页）的时候，我们就可以通过cookie来向访问者电脑上存储数据，或者某些网站为了辨别用户身份、进行session跟踪而储存在用户本地终端上的数据（通常经过加密）

• 工作原理

  • 当网页要发http请求时，浏览器会先检查是否有相应的cookie，有则自动添加在request header中的cookie字段中。这些是浏览器自动帮我们做的，而且每一次http请求浏览器都会自动帮我们做。这个特点很重要，因为这关系到“什么样的数据适合存储在cookie中”。
  • 存储在cookie中的数据，每次都会被浏览器自动放在http请求中，如果这些数据并不是每个请求都需要发给服务端的数据，浏览器这设置自动处理无疑增加了网络开销；但如果这些数据是每个请求都需要发给服务端的数据（比如身份认证信息），浏览器这设置自动处理就大大免去了重复添加操作。所以对于那种设置“每次请求都要携带的信息（最典型的就是身份认证信息）”就特别适合放在cookie中，其他类型的数据就不适合了

• 限制与问题

  由于HTML4时代Cookie的大小、格式、存储数据格式等限制，网站应用如果想在浏览器端存储用户的部分信息，那么只能借助于Cookie。但是Cookie的这些限制，也就导致了Cookie只能存储一些ID之类的标识符等简单的数据

  • 不同的浏览器存放的cookie位置不一样，也是不能通用的
  • cookie的存储是以域名形式进行区分的，不同的域下存储的cookie是独立的
  • 们可以设置cookie生效的域（当前设置cookie所在域的子域），也就是说，我们能够操作的cookie是当前域以及当前域下的所有子域
  • 一个域名下存放的cookie的个数是有限制的，不同的浏览器存放的个数不一样,一般为20个，如果试图存储更多 cookie，则最旧的 cookie 便会被丢弃
  • 每个cookie存放的内容大小也是有限制的，不同的浏览器存放大小不一样，一般为4KB，如果超过会被截掉
  • 有些浏览器还会对它们将接受的来自所有域名的 cookie 总数作出绝对限制，通常为 300 个
  • cookie也可以设置过期的时间，默认是会话结束的时候，当时间到期自动销毁
  • 存在安全性问题，如果cookie被人拦截了，那人就可以取得所有的session信息。即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了
  • Cookie默认情况都会随着Http请求发送到后台服务器，但并不是所有请求都需要Cookie的，比如：js、css、图片等请求则不需要Cookie

• 使用时注意

  • 通过良好的编程，控制保存在cookie中信息的大小。
  • 通过加密和安全传输技术（SSL），减少cookie被破解的可能性。
  • 只在cookie中存放不敏感数据，即使被盗也不会有重大损失。
  • 控制cookie的生命期，使之不会永远有效。偷盗者很可能拿到一个过期的cookie。

• 存在形式

  document.cookie="cookieName=cookieValue;expires='Sat, 11 Nov 2017 07:20:22 GMT';path='/'";

  cookieName：该cookie的名称

  cookieValue：该cookie的值

  expires：cookie的过期时间。是一个具体的时间点，到了该时间后，系统会自动回收cookie。如果不写，系统默认浏览器关闭时回收

  path：cookie有效的作用域，在该目录下cookie有效。如果不写，默认当前网站根目录有效

• 封装操作

  var cookieUtil = {
      /**
       * 设置cookie
       * @param name   cookie的名称
       * @param value  cookie的值
       * @param time   cookie过多长时间过期，单位是毫秒
       * @param path   cookie的有效区域，根目录是"/"或者不传参
       */
      setCookie: function(name, value, time, path){
          var cookieStr = "";
          // 字符需要进行URI编码，防止一些特殊的字符影响传输，取值得时候要响应的解码
          cookieStr += (name + "=" + encodeURIComponent(value) + ";");
          if (time){
              var outDate = new Date();
              outDate.setTime(new Date().getTime()+time);
              // 时间需要转换成GMT格式时间
              cookieStr += ("expires = " + outDate.toUTCString() + ";");
          }
          if (path){
              cookieStr += ("path = " + path + ";");
          }
          document.cookie = cookieStr;
      },
                  
      /**
       * 获取cookie的值
       * @param name   cookie的名称
       * @returns {*}  返回cookie的值
       */
      getCookie: function(name){
          var cookieStr = document.cookie;
          var cookiePairs = cookieStr.split(";");
          for (var i = 0; i < cookiePairs.length; i++){
              var index = null;
              if (index = cookiePairs[i].indexOf(name) >= 0){
                  var cookieValue = cookiePairs[i].substring(index + name.length + 1);
                  // 结果需要URI解码，存储的时候根据URL进行过编码
                  return decodeURIComponent(cookieValue);
              }
          }
          return null;
      },
                  
      /**
        * 删除cookie，重新设置cookie过期时间为过去时间，系统自动删除
        * @param name  cookie的名称
        */
      deleteCookie: function(name){
          this.setCookie(name, null, -1, null);
      }
  }
  

  cookieUtil.setCookie("sunck", "good");
  cookieUtil.setCookie("kaige", "nice");
              
  console.log(document.cookie);
  

二、本地存储

• 说明

  HTML5规范提出了本地存储大量的数据相关解决方案，又叫Dom Storgage（Web Storage）存储机制，分为sessionStorage和localStorage

  HTML5 web 存储是一个比cookie更好的本地存储方式，它使用HTML5可以在本地存储用户的浏览数据

  早些时候，本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速。 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上。它也可以存储大量的数据，而不影响网站的性能

  数据以 键-值 对存在，web网页的数据只允许该网页访问使用

• 特性

  • 数据存储在用户浏览器中

  • 设置、读取方便、甚至页面刷新不丢失数据

  • 数据不会随着Http请求发送到后台服务器

  • 容量较大，大约5兆左右

  • 只能存储字符串，可以将对象JSON.stringify() 编码后存储

• localStorage

  说明：

  1. 域内安全、永久保存，除非手动删除否则关闭页面也会存在
  2. 可以多窗口（页面）共享（同一浏览器可以共享）

  使用：

  • 存储数据：localStorage.setItem(key, value)
  • 获取数据：localStorage.getItem(key)
  • 删除数据：localStorage.removeItem(key)
  • 清空数据：localStorage.clear()

  localStorage.setItem("sunck", "good");
  localStorage.setItem("kaige", "nice");
  localStorage.setItem("kaishen", "cool");
  console.log(localStorage.getItem("sunck"));
  localStorage.removeItem("sunck");
  console.log(localStorage.getItem("sunck"));
  localStorage.clear();
  

• sessionStorage

  说明：

  1. 生命周期为关闭浏览器窗口
  2. 在同一个窗口(页面)下数据可以共享

  使用：

  • 存储数据：sessionStorage.setItem(key, value)
  • 获取数据：sessionStorage.getItem(key)
  • 删除数据：sessionStorage.removeItem(key)
  • 清空数据：sessionStorage.clear()

  sessionStorage.setItem("sunck", "good");
  sessionStorage.setItem("kaige", "nice");
  sessionStorage.setItem("kaishen", "cool");
  console.log(sessionStorage.getItem("sunck"));
  sessionStorage.removeItem("sunck");
  console.log(sessionStorage.getItem("sunck"));
  

三、Cookie和本地存储比较

• 相同点

  都保存在浏览器端，同源的

• 不同点

  ①传递方式不同

  cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递

  sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存

  ②数据大小不同

  cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下
  存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识

  sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大

  ③数据有效期不同

  sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持

  localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据

  cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

  ④作用域不同

  sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面

  localStorage 在所有同源窗口中都是共享的

  cookie也是在所有同源窗口中都是共享的

  Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者
  Web Storage 的 api 接口使用更方便