使用localstorage存储跨页面全局变量（usertoken）

最新推荐文章于 2024-07-22 13:42:28 发布
最新推荐文章于 2024-07-22 13:42:28 发布
阅读量4.2k 收藏 3
点赞数 1
分类专栏： 前端学习记录 文章标签： localstorage
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/princek123/article/details/95453252
版权

原理可参考：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage

例如我们在登录页面获取到token，想在其他页面发送请求的时候一同发送，那么可以先存下来

        localStorage.setItem('user_token', response.token)

然后在其他页面这样调用

token: localStorage.getItem('user_token'),

此值不会随页面销毁而销毁

柯柯就是我
关注
专栏目录
深入理解ArkTs中的AppStorage和LocalStorage
一键难忘的博客
11-30 1735
通过深入理解ARKTS中的AppStorage和LocalStorage，我们能够更好地利用这两个特性进行应用状态的管理和共享。合理使用这些工具，可以提高代码的可维护性和性能，使得开发更加高效。在实际开发中，根据具体需求和场景选择合适的状态管理方式，将有助于构建更健壮、可扩展的HarmonyOS应用。ARKTS中的AppStorage和LocalStorage为开发者提供了强大的状态管理工具，使得应用程序能够高效地共享和管理状态数据。
10 使用Vue+axios+Vuex实现登录后前端数据本地化存储实战
xingyu_qie的专栏
04-03 7763
本文重点讲述Vuex的实战使用
vue中利用localStorage存储全局变量
f1443369600的博客
12-14 2696
localStorage是本地存储，允许在浏览器中存储 key-value 对的数据，用于长久保存整个网站的数据，全局变量可用这种方法保存，在页面刷新不会丢失数据，保存的数据没有过期时间，直到手动去删除。 1 localStorage的特点 优势 可以存储5M大小的数据（sessionStorage只可以存储4K大小的数据）。 可将第一次请求的数据进行本地存储，节约带宽，快速响应。 限制...
使用localStorage实现页面之间通信，一个页面发生变化，另一个页面也同时发生变化
Coder-文小白的博客
10-24 5195
不知道大家在平时开发过程中有没有遇到这种需求，浏览器打开两个窗口，一个发生变化，另一个也要同时发生变化。这种需求怎么实现呢，可以参考使用localStorage实现。 简单介绍一下localStorage：在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。 loca
vue登录成功之后的token处理
最新发布
weixin_53159238的博客
07-22 755
Token是用户登录成功之后服务端返回的一个身份令牌，在项目中经常要使用。例如：访问需要授权的API接口、校验页面的访问权限等。同时，这里我们还需要将token数据进行存储，这样在访问其它的页面组件的时候，就可以获取token数据来进行校验。
使用LocalStorage跨页面通信
zhouhao620的博客
04-11 2875
LocalStorage是常用的前端本地存储方式，它有一个相关的事件StorageEvent。 当LocalStorage变化时，会触发storage事件。利用这个特性，可以通过把消息写入LocalStorage，然后通过在各个页面内监听storage事件的方式来实现跨页面通信。 window.addEventListener("storage", (e) => { if (e.ke...
local storage在不同标签页，不同浏览器之间通用吗，可以跨域吗
weixin_43801836的博客
10-20 3095
local storage不可以跨域，但是可以使用iframe+postmessage可以实现。localStorage相比而言可以在多个标签页中共享数据，sessionStorage只适用于同一个标签页，：同源页面，也就是协议，端口，域名相同的页面。当然不能跨浏览器啦，都不是一个存储系统。
VUE中使用localStorage实现跨标签页面的通信
gdutRex的博客
10-22 3475
前言 目前出现了一个需求，需要父页面打开新的子页面，子页面提交表单之后，关闭子页面，然后把数据返回给父页面。 本来考虑使用sharedWorker，但是由于兼容性太差了，就弃用了。看到网上的介绍可以使用localStorage来实现，我就尝试了下。下面是一些具体的细节。 开始 整体流程如图所示： 需求分析 子页面需要知道自己的父页面对应的是谁，所以父页面打开子页面的时候需要传输一个父页面的KEY值 由于表单是使用dialog来显示，需要注意避免出现事件重复注册的，及时销毁事件，保留监听事件的唯一。 由于
vue webpack开发访问后台接口全局配置的方法
10-18
接下来，我们可以在登录页面的表单中使用这些全局变量。假设你有一个名为`form`的对象，可以这样设置： ```javascript form: { name: process.env.USER_NAME, password: process.env.PASS_WD } ``` 为了处理API...
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
12-09
- 密钥（secret）应该保密，不应在代码中硬编码，应存储在环境变量或其他安全位置。 - 为防止重放攻击，可以设置JWT的过期时间（如2小时）。 - 实际项目中，密码不应明文存储，应使用哈希加盐的方式进行存储和...
angular跳转指定页面_angularjs项目的页面跳转如何实现（5种方法）
weixin_26841957的博客
12-31 4463
Angular页面传参有多种办法，根据不同用例，我举5种最常见的：1. 基于ui-router的页面跳转传参(1) 在AngularJS的app.js中用ui-router定义路由，比如现在有两个页面，一个页面(producers.html)放置了多个producers，点击其中一个目标，页面跳转到对应的producer页，同时将producerId这个参数传过去。.state('producer...
localstorage 和 storage 事件 用于跨页面通信
qq_44917015的博客
04-19 310
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
angularJS中localstorage，利用localstorage来实现其他页面获取本地缓存
coders_Lz的博客
07-01 1479
angularJS之本地缓存localstorage，下面是鄙人在项目中用到的localstorage的分享。如有不足还请大神指教。
JS本地存储 localStorage操作（一个页面存值，另外一个页面拿值）
云下的你
09-06 1万+
存值方法： localStorage.setItem(Key, value); localStorage.Key=value; 读值方法： localStorage.getItem(Key); localStorage.key; 使用： a页面存值 localStorage.li='哈哈哈'；//存放字符串或者jso...
JavaScript-LocalStorage跨域方式和不同页面之间通讯方式
weixin_45203607的博客
01-09 970
我们以LocalStorage的交互方式进行演示,下代码主要不是给你们看的是给我自己看的留作一个记录,方便日后回顾, 解决方案是iframe +postMessage 方式进行跨域通讯可以自行百度搜索 消息发送器 PostMessage.js //注意事项 ,如果DOM的(iframe)没有加载出来那么下面所有的方法都将失效 //解决办法: window.onload = function () { //DOM加载完毕后在执行 // addPostMess
localStorage全局存储数据
caohongxia666的博客
01-20 670
1.设置要全局传的值 localStorage.setItem('mRoleIndex', data.user.roleIndex) 2.在使用的地方获取值 var roleIndex = localStorage.getItem('mRoleIndex')
如何保存token-localStorage存储
热门推荐
qq_27474555的博客
12-03 1万+
1、原理 原理是通过vue-router的beforeEach钩子，在每次路由到一个地址的时候先判断该路由是否携带了meta信息，且该信息中的requireAuth是否为true，如果为true表示该路由是需要身份验证的。则去localStorage找token，若token不存在则表示用户无认证，去登录请求token。若token存在则拿着token去请求。 2、token保存 login.vu...
HTML5的跨页面传参，localstorage方法非常简单
Velocityy的博客
12-30 752
跨页面传参问题，在H5新添加的localstorage面前变得容易了很多。 直接上图 ~ 原网页可参考：https://segmentfault.com/q/1010000000308712#a-1020000000308852
localstorage如何跨域获取(代码实例)
jingdianjiuchan的博客
03-23 4011
使用postMessage跨域通信在A域名的页面中，可以使用postMessage方法将localStorage的值发送到B域名的页面中，B域名的页面中再通过监听message事件获取localStorage的值。示例代码：在A域名的页面中。使用服务器代理在A域名的页面中，可以通过服务器代理的方式将localStorage的值传递给B域名的页面。在服务器代理中，可以通过以下代码获取localStorage的值，并将其返回给请求的页面。
使用window.open向打开页面的localStorage传递token
03-30
由于安全性考虑，localStorage只在同一域名下的页面之间共享，所以需要在打开的新页面中通过JavaScript代码获取父页面的localStorage，并从中获取token。 以下是示例代码： 在父页面中，使用window.open打开新页面，并将token存储在localStorage中： ```javascript var token = "my_token"; var newWindow = window.open("new_page.html"); newWindow.localStorage.setItem("token", token); ``` 在新页面中，可以通过以下代码获取父页面的localStorage，并从中获取token： ```javascript var token = window.opener.localStorage.getItem("token"); console.log(token); ``` 需要注意的是，如果在新页面中反复使用localStorage获取token，可能会导致性能问题。为了避免这种情况，可以将token存储在全局变量或者通过URL参数传递。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值