本地浏览器存储分类

一、localStorage

localStorage为HTML5新增特性，主要用于浏览器本地存储数据使用，存储上限5M左右

1、 存储大小：上限5M左右

2、 类型：只能存储字符串格式的数据

3、 时间范围：永久性存储，只能手动删除

4、 适用范围：①存储Token

5、 使用方法：getItem\setItem

①字符串/数字

//这里方法为官方推荐用法
//存储  为键值对形式 
localStorage.setItem("a","123"); 
//读取  
var result= storage.getItem("a")
console.log(result);
//打印结果
123

②数组

//这里方法为官方推荐用法
//存储  为键值对形式 
var k=[1,2,3,4,5]
localStorage.setItem("b",k); 
//读取  
var result= storage.getItem("b")
console.log(result);
//打印结果
1,2,3,4,5

无法存储格式：对象：{ }，数组对象：[{ },{ }]

二、Cookies

1、 存储大小：上限几十kb左右

2、 类型：只能存储字符串格式的数据

3、 时间范围：可以设置时效期，也能手动删除，还能设置适用路径网页

4、 适用范围：①用户账号密码

5、 使用方法：Cookies.set与Cookies.get和Cookies.remove

安装插件使用更方便
①安装插件

$ npm i js-cookie

②引入使用(不需要注册) 那里使用引用到哪里

import Cookies from 'js-cookie'

③使用方法

创建一个在整个网站上有效的 cookie：

Cookies.set('name', 'value')

创建一个从现在起 7 天后过期的 cookie，在整个站点中有效：

Cookies.set('name', 'value', { expires: 7 })

创建一个过期cookie，对当前页面的路径有效：

Cookies.set('name', 'value', { expires: 7, path: '' })

读取 cookie：

Cookies.get('name') // => 'value'
Cookies.get('nothing') // => undefined

阅读所有可见的 cookie：

Cookies.get() // => { name: 'value' }

注意：无法通过传递其中一个 cookie 属性（在写入相关 cookie 时可能会或可能不会使用）来读取特定 cookie：

Cookies.get('foo', { domain: 'sub.example.com' }) // `domain` won't have any effect...!
foo仅.get()当从调用代码的位置可见时，具有该名称的 cookie才可用；阅读时域和/或路径属性将不起作用。

删除 cookie：

Cookies.remove('name')

删除一个对当前页面路径有效的cookie：

Cookies.set('name', 'value', { path: '' })
Cookies.remove('name') // fail!
Cookies.remove('name', { path: '' }) // removed!

重要的！删除 cookie 并且您不依赖默认属性时，您必须传递用于设置 cookie 的完全相同的路径和域属性：

Cookies.remove('name', { path: '', domain: '.yourdomain.com' })

注意：删除不存在的 cookie 既不会引发任何异常，也不会返回任何值。

更多移步官网：https://github.com/js-cookie/js-cookie