机电建设工程施工网站wordpress调用当前分类描述

机电建设工程施工网站,wordpress调用当前分类描述,良庆网站建设,页面模板 wordpress文章目录简介一、Vue-ls对比原生API二、安装和使用1.安装2.引入与配置 (在 main.js 中)3.在组件中使用1.存储数据#xff08;支持设置过期时间#xff0c;单位毫秒#xff09;2.读取数据#xff08;支持默认值#xff09;3.移除单个4.清除所有#xff08;当前命名空间下支持设置过期时间单位毫秒2.读取数据支持默认值3.移除单个4.清除所有当前命名空间下5.监听变化例如在其他标签页修改了相同key6.取消监听变化组件销毁时使用简介Vue-ls 是一款专门为 Vue.js 应用设计的插件它的核心作用是为浏览器本地存储Web Storage提供了一个与 Vue 深度集成的、功能更强大的接口。它本质上是对原生 localStorage、sessionStorage 的增强封装。一、Vue-ls对比原生API特性原生 Web Storage APIvue-ls 插件数据格式只能存储字符串存对象需手动 JSON.stringify自动序列化可直接存储对象、数组等过期时间不支持支持设置过期时间毫秒命名空间需手动管理易冲突支持前缀隔离namespace避免冲突跨标签页监听需手动监听 storage 事件提供 .on() 和 .off() 方法方便监听Vue集成度需单独引入和使用深度集成可通过 Vue.ls 或组件内 this.$ls 调用二、安装和使用1.安装npminstallvue-ls --save# 或yarnaddvue-ls2.引入与配置 (在 main.js 中)importVuefromvueimportStoragefromvue-lsconstoptions{namespace:vue_,// 存储键名前缀用于隔离项目可自定义[citation:6][citation:9]name:ls,// 注入Vue的属性名默认通过 this.$ls 或 Vue.ls 调用[citation:3][citation:8]storage:local// 存储类型local默认即localStorage、session、memory[citation:3][citation:4]}Vue.use(Storage,options)数据保存地方对比:存储位置数据特点是否共享local (对应 localStorage)持久化存储关闭浏览器后数据仍在。同一域名下的所有标签页共享。session (对应 sessionStorage)会话级存储关闭浏览器或标签页后数据丢失。仅当前标签页独享。memory (内存存储)仅存在于内存页面刷新后数据丢失。仅当前页面生命周期内有效。3.在组件中使用1.存储数据支持设置过期时间单位毫秒this.$ls.set(userToken,abc123,60*60*1000)// 存储1小时后过期不设置就是永久保存2.读取数据支持默认值lettokenthis.$ls.get(userToken)letnamethis.$ls.get(userName,默认名)// 若key不存在返回默认名[citation:6]3.移除单个this.$ls.remove(userToken)// 移除单个4.清除所有当前命名空间下this.$ls.clear()// 清除所有当前命名空间下5.监听变化例如在其他标签页修改了相同key// 监听变化例如在其他标签页修改了相同keythis.$ls.on(userToken,(newVal,oldVal,url){console.log(数据变了,newVal)})6.取消监听变化组件销毁时使用beforeDestroy(){// 组件销毁前移除监听this.$ls.off(KEY_TEMPLATES,this.handleTemplateChange);},