前端开发之localstorge和sessionstorge的结合使用，达到多个tab之间共享页面的值

最近有一个这样的需求，就是在同一个tab内要共享session的值，使每个页面能共享单个页面内的值，并且页面关掉要移除值。
这里我们可以用localstorge和sessionstorge结合使用，来达到这个效果。

    <script>if (!sessionStorage.getItem("sessionValueCode")) {//如果没有值我们首先设置一个getsession，可以执行storge事件localStorage.setItem("getSession", Date.now());} else {// 如果已经存在session// 你所需的行为写在这个里面}//通过监听storage事件，如果一旦storge发生改变，就会触发该事件。window.addEventListener("storage",function(event) {if (!event.newValue) {return;}//在该函数中，当 localStorage 中 key 为 getSession 的内容发生变化时会调用该函数，//函数中有一个 event 对象，该event的属性 key 为 localStorage改变内容的key(这里为getSession) , //另一个属性 newValue 存储着 localStorage中key对应的内容，//利用该方式可完成sessionStorage在tab间的共享if (event.key == "getSession") {localStorage.setItem("storeSessionData", sessionStorage.getItem("sessionValueCode"));localStorage.removeItem("storeSessionData");}if (event.key == "storeSessionData") {sessionStorage.setItem("sessionValueCode", event.newValue);localStorage.removeItem("getSession");}if (event.key == "updateSessionCode") {sessionStorage.setItem("sessionValueCode", event.newValue);localStorage.removeItem("updateSessionCode");}});//设置值sessionStorage.setItem("sessionValueCode", "true");localStorage.setItem("updateSessionCode", "true");</script>

前端开发之localstorge和sessionstorge的结合使用，达到多个tab之间共享页面的值相关推荐

移动前端开发之viewport,devicePixelRatio的深入理解
移动前端开发之viewport的深入理解在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的met ...
date javascript 时区_第23节 Datejs 日期库-Web前端开发之Javascript-零点程序员-王唯
Datejs 是一个开源的JavaScript库,用来解析.格式化和处理日期数据,支持多种语言的日期格式处理:官网:www.datejs.com/ Moment.js 是一个简单易用的轻量级JavaS ...
深入理解移动前端开发之viewport
在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配或 ...
【转载】前端开发之CSS兼容写法经验总结
为什么80%的码农都做不了架构师?>>> 前端开发之CSS兼容写法经验总结技术 maybe yes 发表于2014-11-23 22:47 原文链接 : http://blog ...
前端开发之SEO（搜索引擎优化）
前端开发之SEO(搜索引擎优化) 文章目录前言一.突出重要内容合理的title.description和keywords 语义化书写HTML代码,符合W3C标准利用布局,把重要内容HTML代码 ...
BCSP-玄子前端开发之JavaScript+jQuery入门CH13_表单校验
BCSP-玄子前端开发之JavaScript+jQuery入门CH13_表单校验 4.13 表单验证 4.13.1 为什么要表单验证保证输入的数据符合要求减轻服务器的压力 [外链图片转存失败,源站 ...
前端开发之html超链接
前端开发之html字体属性和超链接前言前端开发之html超链接 1.超链接的三种形式 1.外部链接:链接到外部文件举例: <a href="02页面.html"> ...
前端开发之jQuery
前端开发之jQuery 一.jquery简介 1. jquery是什么? 2. 什么是jQuery对象? 二.寻找元素(重要的选择器和筛选器) 1. 选择器 2. 筛选器三.操作元素(属性 CSS ...
前端开发之vue可视化数据图表组件（Chart.js）
前端开发之vue可视化数据图表组件(Chart.js) 前言制作好的效果图 vue2中使用Chart.js 1.在项目中安装Chart.js 组件 2.vue文件 vue3中使用Chart.js v ...

前端开发之localstorge和sessionstorge的结合使用，达到多个tab之间共享页面的值

前端开发之localstorge和sessionstorge的结合使用，达到多个tab之间共享页面的值相关推荐

最新文章

热门文章