vue项目刷新页面导致数据消失问题解决

vue项目刷新页面导致数据消失问题解决,第1张

最近vue项目中遇到了一个比较棘手的问题: 例如第一个页面是列表,通过选中一行进入第二个页面展示选中内容的详细信息,这个时候选中的信息保存在vuex可是这个时候就出现了一个问题,我不能在第二个页面通过浏览器刷新,否则vuex数据清空,则第二个页面将会不知道展示什么内容了,显然这一是严重的bug!  前端开发众所周知在浏览器保存数据使用session或者cookie,这当然是可行的,不过如果每一条需要存储的信息都去执行存储到session然后在通过session的数据赋值到项目对应的数据下则导致项目看起来过于臃肿了

所以通过各种百度找出来vuex的 plugins ,可以很好的解决我遇到的问题, vuex 的用法就不介绍了,请参考官方文档

以下步骤是plugins的用法

LStoragegetItem(key): 通过key可以获取sessionStorage的value

LStoragesetItem(key, val): 存储数据

LStorageclear(): 清除所有的session记录

LStorageremoveItem(key): 删除制定的session记录

myPlugins函数里边的每次页面刷新的时候会先获取session的数据通过commit方法保存到vuex

storesubscribe方法是在关联store的commit事件,也就是只要你通过commit在修改vuex的数据这里的函数就会监听到,并且执行里边的内容保存数据到session

vuex添加plugins, myPlugins的参数可以根据自己的需要调整

好了关于这个问题就这样解决了,如果有什么不对的地方欢迎指正,献丑了O(∩_∩)O ~~

@gtczr说的对,SESSION是指保存在服务器的会话,而JS是运行在客户端的,如果你想取得SESSION里面的值,需要使用动态语言在页面上输出内容并赋给JS变量,或使用接口来获取。如:

//

var

session_value

=

'<%=sessiongetAttribute("SESSION_KEY")%>';

ession是后台服务器端的变量,而js是前段脚本,

在js中是没有现成的方法获取session的值的,需要通过服务器语言来获取。

比如java就可以用来获取session的值,再赋值给js变量。

以jsp为例,通过:

var id = '<%=sessiongetAttribute("id")%>';

java代码用单引号引起来,java中字符串变量用双引号

示例

可以做一个jsp简单的页面显示session的值:

先将session值置为Imsession,然后显示。调用jsp代码来运行

<html>

<head>

<title>自定义浏览页面</title>

<script type="text/javascript">

function x(){

<%sessionsetAttribute("id","Imsession");%>

var id = '<%=sessiongetAttribute("id")%>';

alert("session是"+id);

} </script>

</head>

<body>

<input type ="button" onClick="javascript:x();" value="session">

</body>

</html>

以上就是关于vue项目刷新页面导致数据消失问题解决全部的内容,包括:vue项目刷新页面导致数据消失问题解决、我想问一下,用JS 怎么获取SESSION中的值、session怎样获取表单的值等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/10128923.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-05
下一篇2023-05-05

发表评论

登录后才能评论

评论列表(0条)

    保存