
最近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怎样获取表单的值等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!
欢迎分享,转载请注明来源:内存溢出
微信扫一扫
支付宝扫一扫
评论列表(0条)