河北省住房与城乡建设厅网站,郑州教育信息网,企业网站怎么做才好,网站为什么要续费(创作不易#xff0c;感谢有你#xff0c;你的支持#xff0c;就是我前行的最大动力#xff0c;如果看完对你有帮助#xff0c;请留下您的足迹#xff09; 目录
前言#xff1a;
方案一
localStorage
介绍
值
示例
JSON.stringify()
介绍
语法
参数
返…(创作不易感谢有你你的支持就是我前行的最大动力如果看完对你有帮助请留下您的足迹 目录
前言
方案一
localStorage
介绍
值
示例
JSON.stringify()
介绍
语法
参数
返回值
使用JSON.stringify() 结合localStorage的例子
具体步骤
1.封装storage 存储模块
2.创建user.jx文件将数据存入vuex的同时也存入本地
方案二
安装插件
使用方法
vuex中module数据的持久化存储
注意事项 前言 这两天在做vue项目存储个人信息的时候遇到了页面刷新后个人信息数据丢失的问题在查阅资料后我得出两种解决数据丢失使数据持久化的方法 方案一 封装 storage 存储模块利用本地存储进行 vuex 持久化处理 方案二 安装一个vuex的插件 vuex-persistedstate 来支持vuex的状态持久化 方案一 在封装储存模块之前我们有必要先复习一下localStorage和JSON.stringify() 的知识 localStorage
介绍 只读的localStorage 属性允许你访问一个Document 源origin的对象 Storage存储的数据将保存在浏览器会话中。localStorage 类似 sessionStorage但其区别在于存储在 localStorage 的数据可以长期保留而当页面会话结束——也就是说当页面被关闭时存储在 sessionStorage 的数据会被清除。 应注意无论数据存储在 localStorage 还是 sessionStorage 它们都特定于页面的协议。 另外localStorage 中的键值对总是以字符串的形式存储。 (需要注意和 js 对象相比键值对总是以字符串的形式存储意味着数值类型会自动转化为字符串类型). 值 一个可被用于访问当前源origin的本地存储空间的 Storage 对象。 示例 下面的代码片段访问了当前域名下的本地 Storage 对象并通过 Storage.setItem() 增加了一个数据项目。 localStorage.setItem(myCat, Tom);该语法用于读取 localStorage 项如下 let cat localStorage.getItem(myCat);该语法用于移除 localStorage 项如下 localStorage.removeItem(myCat);该语法用于移除所有的 localStorage 项如下 // 移除所有
localStorage.clear();JSON.stringify()
介绍 JSON.stringify() 方法将一个 JavaScript 对象或值转换为 JSON 字符串如果指定了一个 replacer 函数则可以选择性地替换值或者指定的 replacer 是数组则可选择性地仅包含数组指定的属性。 console.log(JSON.stringify({ x: 5, y: 6 }));
// Expected output: {x:5,y:6}console.log(JSON.stringify([new Number(3), new String(false), new Boolean(false)]));
// Expected output: [3,false,false]console.log(JSON.stringify({ x: [10, undefined, function () {}, Symbol()] }));
// Expected output: {x:[10,null,null,null]}console.log(JSON.stringify(new Date(2006, 0, 2, 15, 4, 5)));
// Expected output: 2006-01-02T15:04:05.000Z语法
JSON.stringify(value[, replacer [, space]])
参数 value 将要序列化成 一个 JSON 字符串的值。 replacer 可选 如果该参数是一个函数则在序列化过程中被序列化的值的每个属性都会经过该函数的转换和处理如果该参数是一个数组则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中如果该参数为 null 或者未提供则对象所有的属性都会被序列化。 space 可选 指定缩进用的空白字符串用于美化输出pretty-print如果参数是个数字它代表有多少的空格上限为 10。该值若小于 1则意味着没有空格如果该参数为字符串当字符串长度超过 10 个字母取其前 10 个字母该字符串将被作为空格如果该参数没有提供或者为 null将没有空格。 返回值 一个表示给定值的 JSON 字符串 使用JSON.stringify() 结合localStorage的例子 一些时候你想存储用户创建的一个对象并且即使在浏览器被关闭后仍能恢复该对象。下面的例子是 JSON.stringify 适用于这种情形的一个样板 // 创建一个示例数据
var session {screens: [],state: true,
};
session.screens.push({ name: screenA, width: 450, height: 250 });
session.screens.push({ name: screenB, width: 650, height: 350 });
session.screens.push({ name: screenC, width: 750, height: 120 });
session.screens.push({ name: screenD, width: 250, height: 60 });
session.screens.push({ name: screenE, width: 390, height: 120 });
session.screens.push({ name: screenF, width: 1240, height: 650 });// 使用 JSON.stringify 转换为 JSON 字符串
// 然后使用 localStorage 保存在 session 名称里
localStorage.setItem(session, JSON.stringify(session));// 然后是如何转换通过 JSON.stringify 生成的字符串该字符串以 JSON 格式保存在 localStorage 里
var restoredSession JSON.parse(localStorage.getItem(session));// 现在 restoredSession 包含了保存在 localStorage 里的对象
console.log(restoredSession);具体步骤
1.封装storage 存储模块
// 约定一个通用的键名
const INFO_KEY hm_shopping_info// 获取个人信息
export const getInfo () {const defaultObj { token: , userId: }const result localStorage.getItem(INFO_KEY)return result ? JSON.parse(result) : defaultObj
}// 设置个人信息
export const setInfo (obj) {localStorage.setItem(INFO_KEY, JSON.stringify(obj))
}// 移除个人信息
export const removeInfo () {localStorage.removeItem(INFO_KEY)
}
2.创建user.jx文件将数据存入vuex的同时也存入本地
import { getInfo, setInfo } from /utils/storage
export default {namespaced: true,state () {return {// 个人权证相关userInfo: getInfo()}},mutations: {setUserInfo (state, obj) {state.userInfo objsetInfo(obj)}},actions: {},getters: {}
}方案二
安装插件
yarn add vuex-persistedstate
// 或
npm install --save vuex-persistedstate
使用方法
import Vuex from vuex;
// 引入插件
import createPersistedState from vuex-persistedstate;Vue.use(Vuex);const state {};
const mutations {};
const actions {};const store new Vuex.Store({state,mutations,actions,/* vuex数据持久化配置 */plugins: [createPersistedState({// 存储方式localStorage、sessionStorage、cookiesstorage: window.sessionStorage,// 存储的 key 的key值key: store,render(state) {// 要存储的数据本项目采用es6扩展运算符的方式存储了state中所有的数据return { ...state };}})]
});export default store;vuex中module数据的持久化存储
/* module.js */
export const dataStore {state: {data: []}
}/* store.js */
import { dataStore } from ./moduleconst dataState createPersistedState({paths: [data]
});export new Vuex.Store({modules: {dataStore},plugins: [dataState]
});
注意事项 storage为存储方式可选值为localStorage、sessionStorage和cookieslocalStorage和sessionStorage两种存储方式可以采用上述代码中的写法若想采用cookies坐位数据存储方式则需要另外一种写法render接收一个函数返回值为一个对象返回的对象中的键值对既是要持久化存储的数据若想持久化存储部分数据请在return的对象中采用keyvalue键值对的方式进行数据存储render函数中的参数既为state对象。
