客户端LocalStorage命名冲突问题(二)

这篇具有很好参考价值的文章主要介绍了客户端LocalStorage命名冲突问题(二)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

问题背景:

我们的前端项目客户端存储采用localStorage,恰好在同一个域下部署了2个前端项(a和b)目,判断用户是否登录的信息都用token字段存储在localStorage中。当我们打开项目a登录后存储了token,然后非正常退出(关掉浏览器窗口或者标签页),然后在打开项目b,问题就出现了,项目b从localStorage中获取到token,判断到用户已经登录,导致项目b显示不正常(没有获取到项目b所需的各种信息,项目a和项目b没有半毛钱关系)。这是所谓的同域下的localStorage命名冲突问题。

解决:

为每一个localStorage的key值提供唯一的前缀区分(我们采用的是用工程名称来区分,就是每一个前端工程起一个名称,虽然有重复的可能,不过概率很小,已经能够解决我们遇到的问题了)。之前已经讲解过通过定义storage.js工具类的方式解决的办法,本篇讲解通过使用Vue.ls插件的方式解决。

Vue.ls插件的安装

使用npm的方式安装
npm install vue-ls --save

使用yarn的方式安装
yarn add vue-ls

Vue.ls插件的使用

import Storage from 'vue-ls';
 
options = {
  namespace: 'test_vue_ls__', // key键前缀,不同项目定义不同前缀,可保证跟其他项目进行区分
  name: 'ls',              // 命名Vue变量.[ls]或this.[$ls],
  storage: 'local', // 存储名称: session, local, memory,local就是存储到localStorage,session 
                           //就是存储到sessionStorage
};
 
Vue.use(Storage, options);  // 或 Vue.use(Storage);
 
new Vue({
    el: '#app',
    mounted: function() {
        Vue.ls.set('test1', 'test2');
        // 设置有效期
        Vue.ls.set('test1', 'test2', 60 * 60 * 1000); //有效1小时,以毫秒为单位
        Vue.ls.get('test1');
        Vue.ls.get('test2', 10); // 如果没有设置test2返回默认值10 
        
        let callback = (newVal, oldVal, uri) => {
          console.log('localStorage change', newVal, oldVal, uri);
        } 
        
        Vue.ls.on('test1', callback) //侦查改变test1键并触发回调 
        Vue.ls.off('test1', callback) //不侦查
        
        Vue.ls.remove('test1'); // 移除
    }
});

Global(全局) 使用方式:Vue.ls
Context(上下文)使用方式:this.$ls

3. API说明
Vue.ls.get(name, def)
返回storage中 name值。在返回之前,内部解析JSON中的值
def: 默认null, 如果为设置则返回 name .
2.Vue.ls.set(name, value, expire)
在storage设置 name 的 value .并将 value 转化为JSON
expire: 默认为 null , name 有效时间以毫秒为单位

Vue.ls.remove(name)
从storage中移除 name . 成功移除 true, 否则返回false.
Vue.ls.clear()
清除storage.

Vue.ls.on(name, callback)
持续监听 name 在其他标签上的更改,更改时触发 callback , 传递以下参数:
newValue: 当前storage中 name , 从持久化的JSON中解析
oldValue: 旧的storage中 name , 从持久化的JSON中解析
url: 修改来自选项卡的URL

5.Vue.ls.off(name, callback)
删除以前的侦听器 Vue.ls.on(name, callback)
 文章来源地址https://www.toymoban.com/news/detail-412480.html

到了这里,关于客户端LocalStorage命名冲突问题(二)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Unity解决Udp客户端无法接收数据的问题

    在我之前做过的项目中,其中不少涉及Udp客户端的项目。在这些项目中,一般只需要实现客户端向服务器端发送数据的功能就可以了,一般都不用接收服务器端发送的数据,但是也有同学使用了我分享的udp客户端插件,说是接收不到服务器端发送的数据。我也一直没时间修改

    2024年01月17日
    浏览(55)
  • MQTT 客户端出现连接订阅等问题时如何排查?

    大家好,这是一期社区专题 FAQ。我们整理了近期社区中关注度较高的问题,在这里进行统一汇总解答。 今后本系列内容将不定期推送,敬请关注。 同时,如果大家在使用 EMQX 的过程中遇到问题,欢迎通过以下方式进行解决: 查阅 EMQX 产品文档与博客文章。 如果在现有资料

    2023年04月20日
    浏览(41)
  • 高版本springboot3.1配置Eureka客户端问题

    只需要按上面配置好,然后高版本的Eureka,不需要@EnableEurekaClient这个注解了,直接SpringBoot启动,就可以注册到注册中心。 /*********************************************************/ /**  * 开启eureka客户端功能  */ //@EnableEurekaClient /**  * @EnableEurekaClient和@EnableDiscoveryClient都让注册中心能够发

    2024年02月10日
    浏览(40)
  • 通过 EPOLL 解决客户端同时连接多服务器的问题

    项目需求是  程序上 同时配置了多个服务端 设备 每隔一段时间需要 比如1分钟 连一下服务器看下是否连通   并将结果上报给平台  原来是用线程池来做的   具体大概就是 定时器到了之后  遍历设备列表  找到设备之后  通过 socket连接 发送一个指令 等待服务器返回 用来

    2024年02月13日
    浏览(40)
  • 使用SPY++查看窗口信息去排查客户端UI软件问题

    目录 1、使用SPY++查看窗口的信息 2、使用SPY++查看某些软件UI窗口用什么UI组件实现的

    2024年02月07日
    浏览(39)
  • C# 解决TCP Server 关不掉客户端连接的问题

    拷贝了一段 TCP Server的应用代码,第一次运行正常,但是关闭软件或者实现disconnect+close后都无法关闭端口连接。 关闭之后,另外一个客户端还在正常与PC连接。 TCP Server 重新运行,无法接收到客户端的连接。 1、 C#  .net界面程序 2、 .net 4.8.1 3、 System.Net.Sockets 4、 TcpListener 接

    2024年02月15日
    浏览(47)
  • LwIP RAW API TCP服务端客户端编程及问题

    1.1 新建TCP控制块 函数原型: 1.2 绑定控制块 tcp_bind() 用于服务端程序 将本地的 IP 地址、端口号与一个控制块进行绑定 函数原型: 1.3 设置控制块处于监听状态 tcp_listen() 用于服务端程序,在接收连接前必须让TCP处于监听状态 1.4 处理连接 tcp_accept() 用于服务端,处理客户端连

    2024年02月04日
    浏览(43)
  • 小米妙享客户端PC 出现打不开的问题

    前几天使用网上分享的小米妙享pc端安装包安装上了,用了几天感觉也都挺好的,平板的镜像,扩展屏幕,也都很好,直到有一天晚上关电脑的时候,所有的应用都没退,直接把电脑关机了,第二天开机的时候,发现小米妙享打不开了(一般小米妙享都设置的开机自启) 用windos自带的应用日

    2024年02月07日
    浏览(224)
  • Java Springboot SSE 解决永久存活 判断客户端离线问题

            在生产环境下,服务端的SseEmitter对象在初始化时可以填入参数,以保证其存活时间,一旦超时,客户端会自动断线重连,在这个过程中如果没有做消息队列等缓存手段,就可能会丢数据。         但是如果设置SseEmitter存活时间为永久(参数填0),就会导致服务

    2024年02月01日
    浏览(55)
  • 使用SPY++查看窗口信息去分析C++客户端UI软件问题

    目录 1、使用SPY++查看窗口的信息 2、使用SPY++查看某些软件UI窗口用什么UI组件实现的

    2023年04月22日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包