cookie,localStorage,SessionStorage三者的区别,以及在vue中的用法

cookie,localStorage,SessionStorage三者的区别,以及在vue中的用法

基本概念

cookie

cookie英文饼干，顾名思义，大小应该非常小，cookie非常小，它的大小限制在4kb左右.

localStorage

localStorage是HTML5标准中新加入的技术,如今localStorage被大多数浏览器所支持。

sessionStorage

sessionStorage与localStorage的接口类似，但保存数据的生命周期与localStorage不同。而sessionStorage是前端的一个概念。它只是可以将一部分数据在当前会话中保存下来，刷新页面数据依旧存在。但是页面关闭后，sessionStorage中的数据就会被清空。

三者的异同

数据上的生命周期的不同

Cookie 一般由服务器生成，可设置失效时间，如果在浏览器端生成cookie，默认是关闭后失效。

localStorage 除非被永久清除，否则永久保存。

sessionStorage 仅在当前会话会有效，关闭页面或浏览器后被清除

存放数据的大小不同

Cookie 一般为4kb

localStorage 和 sessionStorage 一般为5mb

与服务器端通信不同

Cookie 每次都会携带HTTP头中，如果使用cookie保存过多数据会带来性能问题

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

vue中localStorage用法

// 字面量的方式定义一个变量
const storage = {
    // 设置本地存储
    set: function (key, value, isJson = false) {
        // 先判断key,value是否为空
        if (key.length == 0 || value.length == 0) {
            return false
        }
        // 判断是否需要转换,true为转换,false,不转换
        let data = (isJson == true ? JSON.stringify(value) : value)
        // 设置缓存
        localStorage.setItem(key, data);
    },
    // 获取本地存储
    get: function (key, isJson) {
        // 判断key,value,是否为空
        if (key.length == 0) {
            return false
        }
        let data = localStorage.getItem(key)
        // 判断是否需要转换json字符串,true为转换,false为不转换
        return isJson == true ? JSON.parse(data) : data
    },
    remove: function (key) {
        // 判断key是否为空
        if (key.length == 0) {
            return false
        }
        // 删除
        localStorage.removeItem(key)
    }
    // 删除u本地存储
}
// 抛出对象
export default storage;

//引用localStorage
import storage from '../storage'

storage.set("user","张三", true);//保存数据

let data=storage.get("user", true);//获取本地数据

storage.remove("user");//删除数据

//SessionStorage与localStorage用法相同不做演示

或者直接用vuex的数据持久化

cnpm install vuex -S//下载vuex
cnpm i vuex-persistedstate -S//下载vuex数据持久化工具

创建store文件夹,在文件夹下创建index.js

//配置如下
import Vue from "vue";
import Vuex from "vuex";
import createPersistedState from "vuex-persistedstate";
Vue.use(Vuex);
export default new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  modules: {},
  // 数据持久化
  plugins: [createPersistedState()]
});

在main.js下引入

import store from "./store";//导入vuex文件
new Vue({
  router,
  store,//导出
  axios,
  render: h => h(App)
}).$mount("#app");

vue中cookie用法

npm install js-cookie --save//下载

Cookies.set('name', 'value');//保存数据
Cookies.get('name');//获取数据
Cookies.remove('name');//删除数据
Cookies.getJSON('name')//转为json格式