一文带你搞懂前端本地存储 _前端本地存储

文章插图

作者：monkeysoft
转发链接：https://mp.weixin.qq.com/s/74INx6HJ0N8RhF8red4FdQ
前言在前端项目开发中，前端的本地存储是必不可少的，今天小编就前端的本地存储在项目中的使用详细的介绍一下。前端本地存储主要有：

cookie
localStorage
sessionStorage
webSQL/indexDB

接下来就这几种前端常用的存储方式进行介绍。
cookiecookie就是存储在客户端的一小段文本，大小不能超过4kb，在请求接口的时候，cookie会被请求携带着，进而被服务器所读取使用。打开浏览器控制台，F12>>Application>>Cookies,随便选择一个域，我们可以看到里面有很多cookie，如下所示：

文章插图

主要属性

Name

cookie的名称

Value

cookie的值,大小最大4Kb

Domain

cookie存储的域名

Path

cookie存储的路径

Size

cookie的大小

Expires/Max-Age

这两个属性涉及到 cookie 的存活时间

Expires 属性指定一个具体的到期时间，到了这个指定的时间之后，浏览器就不再保留这个 cookie ,它的值是 UTC 格式，可以使用 Date.prototype.toUTCString() 格式进行转换。
Max-Age 属性制定了从现在开始 cookie 存在的秒数，比如 60 * 60 （即一小时）。过了这个时间以后，浏览器就不再保留这个 Cookie 。

Max-Age的优先级比Expires高，如果两者都不设置，则这个cookie会在浏览器关闭的时候失效。

HttpOnly

如果设置了该属性，意思就是这个cookie不能被JAVAScript取到，也就防止了cookie被脚本读取，然后当发起请求的时候，该cookie才会被带上。

Secure

指定浏览器只有在加密协议 HTTPS 下才能发送cookie，不需要设置，当协议是https时，会自动开启。

使用方式

设置cookie

/** * 设置cookie * @param {*} key 名称 * @param {*} val 值 * @param {*} time 失效时间 */export const setCookie = (key, val, time) => {  var date = new Date();  var expiresDays = time;  //将时间转换为cookie设置时间的格式  date.setTime(date.getTime() + expiresDays * 24 * 3600 * 1000);  document.cookie = key + "=" + val + ";expires=" + date.toDateString();}

获取cookie

/** * 获取cookie * @param {*} key 名称 */export const getCookie = (key) => {  var getCookie = document.cookie.replace(/[ ]/g, "");  var arrCookie = getCookie.split(";")  var tips;  for (var i = 0; i < arrCookie.length; i++) {    var arr = arrCookie[i].split("=");    if (key == arr[0]) {      tips = arr[1];      break;    }  }  return tips;}

删除cookie

删除cookie的话，可以直接调用设置cookie的方法，将失效时间置为-1，如下：
setCookie(key,'',-1)localStorage/sessionStoragelocalStorage/sessionStorage是在html5中新加入的技术，两者除了数据的时效性不一样之外，其他都一样。大小一般为5MB，存储的时候，仅仅在客户端存储，不会随着请求的调用而传递到服务器。