VUE中localStorage，sessionStorage，cookie三种本地存储介绍及其简单的使用方法

1.localStorage

    数据的生命期：除非被清除，否则永久保存； 

    存放数据大小：一般为5MB ；

    与服务器端通信：仅在客户端（即浏览器）中保存，不参与和服务器的通信 ；

    易用性：源生接口可以接受，亦可再次封装来对Object和Array有更好的支持；

1.1使用

     存储参数（setItem）

localStorage.setItem("参数名",参数值)
//例

export default {
    data() {
        return {
            name: "123"
        }
    },
    methods: {
        sto() {
            localStorage.setItem("v", this.name)
        }
    }
}

     使用参数（getItem）

//在需要取参得地方书写
localStorage.getItem('参数名') //参数名为存储时得名字
//例
localStorage.getItem('v')

    删除参数（removeItem）上文中我们提到localStorage除非被清除，否则永久保存，所以需要在合适得时机清除掉来缓解系统的压力

    

//在需要删除的地方书写
localStorage.removeItem('参数名') //与存储时的参数名一致
//例
localStorage.removeItem('v')

2.sessionStorage

    数据的生命期：仅在当前会话下有效，关闭页面或浏览器后被清除 ；

    存放数据大小：一般为5MB ；

    与服务器端通信：仅在客户端（即浏览器）中保存，不参与和服务器的通信 ；

    易用性：源生接口可以接受，亦可再次封装来对Object和Array有更好的支持；

2.1使用

    sessionStorage的使用方式( 存储参数（setItem），使用参数（getItem）， 删除参数（removeItem）),均与localStorage一致，只需要将例子中的localStorage替换成sessionStorage即可正常使用，就不进行过多的赘述

   接下来我们来说cookie的使用

3.Cookie

    数据的生命期：一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效 ；

    存放数据大小：4K左右 ；

    与服务器端通信：每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题

    易用性：需要程序员自己封装，源生的Cookie接口不友好

3.1使用

     1.安装

        打开终端（如果使用的是vscode编辑器，可以按ctrl+`快捷键）

输入

npm install js-cookie --save

之后在src/目录下的 main.js文件之中引入

import Cookies from "js-cookie";

   2.使用

  存储参数（set）

Cookies.set('参数名', '参数值')

  使用参数（get）

Cookies.get('参数名')

  删除参数（remove）

Cookies.remove('参数名')