前端做本地数据存储的方式

1. Cookies

vue项目中常使用“js-cookie”

import Cookies from 'js-cookie'

const TokenKey = 'Admin-Token'

export function getToken() {
  return Cookies.get(TokenKey)
}

export function setToken(token) {
  return Cookies.set(TokenKey, token)
}

export function removeToken() {
  return Cookies.remove(TokenKey)
}

2. localStorage

存储

localStorage.setItem('username','嘻嘻嘻');

获取

localStorage.getItem('username');

删除

localStorage.remove('username');

3. sessionStorage

•   a sessionStorage window.open打开 baidu.com 不在
  

•   a sessionStorage window.open打开 b (a与b同源) 在
  

怎么存储

sessionStorage.setItem（“key”，“value”）

怎么获取存储的值

sessionStorage.getItem（“key”，“value”）

4. Web SQL

5. IndexedDB

const IndexedDB = window.indexedDB.open(dbName, version)
  IndexedDB.onupgradeneeded = function (event: any) {
    // 数据库版本 version
    // 如果指定的版本号，大于数据库的实际版本号，就会发生数据库升级事件upgradeneeded
    // 新建数据库
    const result = event.target.result
    if (!result.objectStoreNames.contains(tableName)) {
      // 先判断库是否存在
      result
        .createObjectStore(tableName, { keyPath: key }) // 表的主键 是 url 比如{url: 'xx', data: {xx}}  主键会自动生成索引
        .createIndex(key, key, { unique: true }) // 建立索引
    }
    IndexedDB.result.close()
  }

以上几种前端存储的区别是什么？

方式名称	标准说明	功能说明
Cookies	HTML5 前加入	1.会为每个请求自动携带所有的Cookies数据，比较方便，但是也是缺点，浪费流量； 2.每个domain(站点)限制存储20个cookie； 3.容量只有4K 4.浏览器API比较原始，需要自行封装操作。 (js-cookie)
localStorage	HTML5 加入	1.兼容IE8+，操作方便； 2.永久存储，除非手动删除； 3.容量为5M
sessionStorage	HTML5 加入	1.功能基本与 localStorage 相似，但当前页面关闭后即被自动清理； 2.与Cookies、localStorage 不同点是不能在所有同源窗口间共享，属于会话级别的存储
Web SQL	非标准功能	1.2010年已被废弃，但一些主流浏览器中都有相关的实现； 2.类似于 SQLite 数据库，是一种真正意义上的关系型数据库，⽤SQL进⾏操作；
IndexedDB	HTML5 加入	1.是一种 NoSQL 数据库，⽤键值对进⾏储存，可进⾏快速读取操作； 2.适合复杂 Web存储场景，⽤JS操作⽅便 (前端大量存数据的场景较少, 如果有, 可以用) 3.存储空间容量, 大于等于 250MB，甚至没有上限

---