一、Javascript本地存储的方式

javaScript 本地缓存的方法，我们主要讲述以下三种：

cookie
sessionStorage
localStorage

cookie

Cookie ，类型为「小型文本文件」，指某些网站为了辨别用户身份而储存在用户本地终端上的数据。

是为了解决 HTTP 无状态导致的问题

作为一段一般不超过 4KB 的小型文本数据，它由一个名称（Name）、一个值（ Value）和其它几个用于控制 cookie 有效期、安全性、使用范围的可选属性组成但是 cookie 在每次请求中都会被发送，如果不使用 HTTPS 并对其加密，其保存的信息很容易被窃取，导致安全风险。

举个例子，在一些使用 cookie 保持登录状态的网站上，如果 cookie 被窃取，他人很容易利用你的 cookie 来假扮成你，完成网站登录。

localStorage

HTML5 新方法，IE8及以上浏览器都兼容

特点

生命周期：持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的
存储的信息在同一域中是共享的
当本页操作（新增、修改、删除）了 localStorage 的时候，本页面不会触发 storage 事件，但是别的页面会触发 storage 事件。
大小：5M（跟浏览器厂商有关系）
localStorage 本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
受同源策略的限制

localStorage 也不是完美的，它有两个缺点：

无法像 Cookie 一样设置过期时间
只能存入字符串，无法直接存对象

sessionStorage

sessionStorage 和 localStorage 使用方法基本一致，唯一不同的是生命周期，一旦页面（会话）关闭， sessionStorage 将会删除数据

二、区别

关于 cookie 、 sessionStorage 、 localStorage 三者的区别主要如下：

存储大小： cookie 数据大小不能超过 4k ， sessionStorage 和 localStorage 虽然也有存储大小的限制，但比 cookie 大得多，可以达到5M或更大
有效时间： localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；sessionStorage 数据在当前浏览器窗口关闭后自动删除； cookie 设置的 cookie 过期时间之前一直有效，即使窗口或浏览器关闭
数据与服务器之间的交互方式， cookie 的数据会自动的传递到服务器，服务器端也可以写cookie 到客户端； sessionStorage 和 localStorage 不会自动把数据发给服务器，仅在本地保存

应用场景

标记用户与跟踪用户行为的情况，推荐使用 cookie

适合长期保存在本地的数据（令牌），推荐使用 localStorage

敏感账号一次性登录，推荐使用 sessionStorage

数据持久化

1. Cookie

// 存储
// 第一个参数是存储的名字，第二个参数是存储的数据
// 例如：
Cookies.set('userlogin', token)

// 获取
// 参数是存储的名字
// 例如：
Cookies.get('userlogin')

2.localStorage

// 存储数据
// 第一个参数是存储的名字，第二个参数是存储的数据
localStorage.setItem('username','cfangxu');

// 获取数据
localStorage.getItem('username')

// 删除数据
localStorage.removeItem('username')

// 全部删除
localStorage.clear()

封装好的数据持久化方法

使用方法：

在src下的Utils工具文件中，新建一个storage.js文件，见下面代码放进去，在使用的地方引用即可

// 本地存储相关方法模块 (数据持久化)

// 存储数据（增，改）
export const setItem = (key, value) => {
  // 将引用数据类型（数组，对象）转化为json字符串进行存储
  if (typeof value === 'object') {
    value = JSON.stringify(value)
  }
  localStorage.setItem(key, value)
}

// 获取数据（查）
export const getItem = key => {
  const data = localStorage.getItem(key)
  try {
    return JSON.parse(data)
  } catch (error) {
    return data
  }
}

// 删除数据（删）
export const removeItem = key => {
  localStorage.removeItem(key)
}

Javascript本地存储的方式有哪些？cookie、sessionStorage、localStorage区别？如何实现数据持久化？并附上封装的代码