前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >vue 项目中从session中获取对象,并且使用里面的属性

vue 项目中从session中获取对象,并且使用里面的属性

作者头像
一写代码就开心
发布于 2021-06-17 11:18:19
发布于 2021-06-17 11:18:19
5.5K00
代码可运行
举报
文章被收录于专栏:java和pythonjava和python
运行总次数:0
代码可运行

django后端传给前段一个json对象,vue接收后如何保存在session中,并且可以在其他的页面从session中拿出对象,用这个对象里面的属性

后端传值

以上是django项目,后端返回给前段的一个json对象

前段获取

利用 JSON.stringify() 这个函数,将后端返回的json格式保存在session中

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
window.sessionStorage.setItem("yhxx",JSON.stringify(res.data.data))

保存后我们在浏览器查看

现在我们要从这个session里面获取这个对象,并且使用他里面的某一个属性

JSON.parse() 这个函数 就是将拿出来的数据转为对象

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
this.userinfo= JSON.parse(window.sessionStorage.getItem('yhxx'))

我们在vue页面使用的时候

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021/05/23 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
vue项目中前端鉴权实现(菜单权限,按钮权限)
从实现思路来说,很简单,在用户输入用户名密码登录的时候,后台会返回该角色的权限集合,前端获取到录入本地存储中,建议使用sessionStorage,在生成菜单的时候通过查询sessionStorage中是否返回了该权限控制菜单展示,返回形式可以前后端协商,菜单级权限按照菜单目录返回,按钮权限通过list返回,可以是id的集合,也可以是特殊字段的集合,数据库增加一张相对应的映射表。
子夜星辰
2022/11/15
2K0
localStorage和sessionStorage本地存储
使用HTML5中的Web Storage API, 可以在客户端存储更多的数据,,可以实现数据在多个页面中共享甚至是同步,对于复杂的数据,可以使用 Web SQL Database API 来实现。
达达前端
2021/02/04
2.2K0
vue sessionStorage存值取值问题
localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。
王小婷
2022/01/09
2.7K0
vue sessionStorage存值取值问题
vue封装sessionStoage存储信息
// 将sessionStorage中获取出来,如果存储没有数据返回空对象,做个优化处理防止报错
Leothy
2022/03/07
5110
Vuex页面刷新的数据丢失问题
Vuex用起来确实很舒服,但是今天碰到了个问题,就是我将JWT和一些权限字符串使用store保存的时候,刷新页面之后这些值就没了,由于我后端集成了SpringSecurity,所以每次请求我都会去验证JWT,如果刷新页面的话,后续请求头中就没有token,就会导致报错。
别团等shy哥发育
2023/03/04
2K0
Vuex页面刷新的数据丢失问题
#Vue 简单的 store 模式
原因:刷新页面时,vue实例重新加载,从而,store也被重置了。store是用来存储组件状态的,而不是用来做本地数据存储的。所以,对于不希望页面刷新之后被重置的数据,使用本地存储来进行存储。
前端小tips
2021/11/25
1.3K0
#Vue 简单的 store 模式
js实现页面跳转并传值(jquery页面跳转并传值)
在前端开发中我们常常需要从一个跳到另一个页面,并且将当前页面的数据传递过去,我常用下面两种方法
全栈程序员站长
2022/07/26
12.5K0
vue2知识点:浏览器本地缓存
<font color='red'>浏览器本地缓存实际是js的知识点,这里只是提一下加深下印象</font>
刘大猫
2024/10/27
1300
vue创建备忘录
首先是先把需要导入的js文件,这里是main.js, 这里面引入的axios,element-ui等依赖都可以通过vue ui里面进行下载。
GeekLiHua
2025/01/21
780
vue创建备忘录
vue中sessionStorage的使用
localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。 sessionStorage 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。 提示: 如果你想在浏览器窗口关闭后还保留数据,可以使用 localStorage 属性, 改数据对象没有过期时间,今天、下周、明年都能用,除非你手动去删除。
kirin
2020/10/09
3.8K0
LocalStorage、SessionStorage
window.sessionStorage和window.localStorage接口用于脚本在浏览器保存数据。
代码之风
2018/10/31
1K0
前端|HTML5中的网络存储
随着互联网的快速发展,基于网页的应用越来越普遍,同时也变得越来越复杂,为了满足日益更新的需求,会经常性的在本地设备上存储数据,例如记录历史活动信息。传统方式使用document.cookie来进行存储,但是由于其存储的空间只有4KB左右,并且需要复杂的操作进行解析,给发开者带来很多不便,为此,HTML5规范提出了网络存储的解决方案。
算法与编程之美
2020/04/27
1.5K0
vuex + sessionstorage 解决vue项目刷新后页面空白/数据丢失
首先查看sessionStorage的地方在控制台的 Application > Storage > Session Storage这里:
xing.org1^
2018/08/02
3.1K0
vuex + sessionstorage  解决vue项目刷新后页面空白/数据丢失
vue浏览器缓存问题_vue兼容浏览器能兼容到几
localStorage -持久化的本地存储,除非主动删除数据,否则数据永远不会过期.
全栈程序员站长
2022/09/27
7290
两步教你在Vue中设置登录验证拦截!
今天在做vue和springboot交互的一个项目的时候,想要基于前端实现一些只有登录验证之后才能访问某些页面的操作,所以在这里总结一下实现该功能的一个解决方案,
灰小猿
2021/12/17
1.2K0
Vue localStorage使用
localStorage #1 环境 "vue": "^2.5.2", "axios": "^0.19.0", "vue-axios": "^2.1.4", "vue-router": "^3.0.1" #2 使用 localStorage有效期是永久的。一般的浏览器能存储的是5MB左右。sessionStorage api与localStorage相同。 sessionStorage默认的有效期是浏览器的会话时间(也就是说标签页关闭后就消失了)。 localStorage作用域是协议、主机名、端口。(理论
Autooooooo
2020/11/09
8750
Vue localStorage使用
32、localStorage本地储存
其实这种实现方式很不好,这章的主要意义还是在于localStorage这个知识点的运用,下章我们学着使用vuex来进行这个地址状态的管理。
Ewall
2018/09/30
2.1K0
32、localStorage本地储存
Vue+ElementUI 搭建后台管理系统(实战系列二)
使用ElementUI已经有一段时间了,在一边上手开发后台管理系统的同事,也记录了一些笔记,一直都没有时间将这些零零散散的笔记总结起来,整理成一个比较系统详细一点的教程,可以留着以后来看。
王小婷
2021/11/24
2.4K0
Vue+ElementUI 搭建后台管理系统(实战系列二)
测试开发必备!webStorage 浏览器本地存储数据(附项目实战案例!)
前期分享的 200行纯前端Vue代码!教你写一个专属TodoList【零基础友好】
Wu_Candy
2022/07/05
5960
Vue(上)
新建一个Html项目(在vscode中输入 ! 加 Tab键 可快速生成一个标准的Html模板);
十玖八柒
2022/08/01
2.5K0
Vue(上)
相关推荐
vue项目中前端鉴权实现(菜单权限,按钮权限)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验