本地存储 Cookie，Storage

web应用大多数数据都是在远程web服务器上，如果用户网络差，请求时间比较长，则会大大降低用户的使用体验。所以web数据本地化很重要。现在常用的本地化方法有以下几点：

cookie
storage

存储在浏览器中的一段字符串。打开一个页面，在控制台里输入document.cookie，返回的那段字符串就是cookie。
世界本无cookie，有了http就有它。

想象一个场景，我在chrome浏览器中登录了一个网站，关掉当前页面，重新打开，我一直处于登录状态，那么web服务器是怎么知道我是登录状态还是未登录状态呢？
这里面有一个关于HTTP的问题，因为HTTP是无状态的。你的浏览器和对方的服务器建立链接，之后自动断开。当你第一次输入用户名，密码时，通过HTTP将数据传到web服务器，后台会创建一个session（一个存储对象，用来标识客户端），通过根据session创建一条cook，然后通过HTTP协议的response的Set-Cookie返回给浏览器，浏览器自己会存储这个cookie，在下一次发送请求时会把这条cookie放到请求头里传到对方的web服务器中，服务器根据这条cookie和预先创建的session进行比对，来判断用户的登录状态。

cookie本质上是一段字符串，其中包含以下一些信息：

key=value形式的键值对，用；隔开
有效时间（格林尼治时间，比北京时间早8小时），如：expires=Fri, 23 Feb 2018 05:47:59 -0000
Secure，通过HTTPS协议加密过的请求发送给服务端
HttpOnly，如果设置该值则在前端通过document.cookie无法获取
Domain/Path，指定要发送该cookie的域名（一般也包括子域名，比如zhidao.baidu.com 就是baidu.com的子域名）和资源路径（Path=/doc，如果指定上述信息，那么访问/doc/*都会带上该cookie，访问/assets 就不会带上cookie）

以上说的内容没法通过document.cookie全部显示出来，可以通过查看开发者工具里，查看http请求头和响应头。
HTTP请求头 set-cookie

JavaScript提供document.cookie方法，可以获取当前页面可查看的cookie。
可以查看runoob cookie的教程，里面有对cookie操作的方法。
自己顺手封装了一个

; (function (factory) {
  var define = window.define || {}
  if (typeof module !== 'undefined' && typeof exports === 'object' && define.cmd) {
    module.exports = factory()
  } else if (typeof define === 'function' && define.amd) {
    define(factory)
  } else {
    window.Cookie = factory()
  }
})(function () {
  // 将字符串转为对象
  function parseStr(str) {
    if (typeof str === 'string') {
      var cookieArr = str.split(';')
      var CookieObj = {}
      for (var i = 0; i < cookieArr.length; i++) {
        var item = cookieArr[i].split('=')
        CookieObj[item[0]] = item[1]
      }
      return CookieObj
    }
  }
  // 将对象转为字符串
  function stringStr(obj) {
    var str = ''
    for (var i in obj) {
      str += i + '=' + obj[i] + ';'
    }
    return str
  }

  var Cookie = {
    get: function () {
      return parseStr(document.cookie)
    },
    set: function (key, value) {
      var CookieObj = parseStr(document.cookie)
      CookieObj[key] = value
      return stringStr(CookieObj)
    },
    del: function (key) {
      var CookieObj = parseStr(document.cookie)
      if (CookieObj[key] !== undefined) {
        delete (CookieObj[key])
        return stringStr(CookieObj)
      }
    }
  }
  return Cookie
});

Storage

Storage：中文译为“仓库，存储”。是W3C建议一种本地存储数据的方式。Storage为每一个给定的源（同源策略的源，protocol://host:port/*）建立一块仓库存储当前源下的数据。Storage本身没有实际意义，但是基于Storage构造的sessionStorage和localStorage有更多的使用意义。前者只存在浏览器页面会话期间（即只要浏览器处于打开状态，包括页面重新加载和恢复），后者可以长期存储。

Storage提供以下API：

Storage.length 返回一个整数，表示存储在 Storage 对象中的数据项数量。
Storage.key() 该方法接受一个数值 n 作为参数，并返回存储中的第 n 个键名。
Storage.getItem() 该方法接受一个键名作为参数，返回键名对应的值。
Storage.setItem() 该方法接受一个键名和值作为参数，将会把键值对添加到存储中，如果键名存在，则更新其对应的值。
Storage.removeItem() 该方法接受一个键名作为参数，并把该键名从存储中删除。
Storage.clear() 调用该方法会清空存储中的所有键名。

// 展示localStorage所有的数据
var wStorage = window.localStorage;
var storageArr = {}
for (var i = 0; i < wStorage.length; i++) {
    storageArr[wStorage.key(i)] =  wStorage.getItem(wStorage.key(i))
}
console.log(storageArr)

有时候我们需要再一个key中展示更多更复杂的数据结构的数据，提供一个方法，传送门，是对Storage其中的某一条做增删查改操作。

参考链接：https://developer.mozilla.org/zh-CN/

本地存储 Cookie，Storage

cookie

Storage

猜你喜欢