使用sessionStorage进行数据存值
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>利用session存值</title>
<style>
* {
padding: 0;
margin: 0;
}
ul {
padding: 0 6px;
}
li {
list-style: none;
width: 100%;
height: 40px;
line-height: 40px;
text-align: center;
/*border: 1px dashed red;*/
margin-top: 9px;
box-sizing: border-box;
}
li:nth-child(odd) {
border: 1px dashed red;
}
li:nth-child(even) {
border: 1px dashed blue;
}
button {
width: 90%;
height: 40px;
margin-left: 5%;
border: 2px solid red;
margin-top: 9px;
}
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app">
<button @click="btn" type="button">点击加载更多</button>
<ul v-for='item in msgNum' v-cloak>
<li v-for='items in item.value'>{{ items.id }}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
msgNum: [],
page: 5
},
methods: {
// 4. 点击更改参数 并继续调用
btn() {
this.page++
this.axiosData()
},
//3.进行页面的数据请求
async axiosData() {
const {data} = await axios.post('https://bj.qhtest.site/byzz/v1.home/analysis', {
page: this.page
})
if(data.code == 200) {
//3.1 请求成功之后 赋值 并且存入到session中 （当页面再次刷新时就有了session）
this.msgNum = this.msgNum.concat(data.data.list)
sessionStorage.setItem('datas', JSON.stringify(this.msgNum))
}
},
//2. 页面一加载就判断session是否存在
sessionData() {
// 2.1 如果存在
if(sessionStorage.getItem('datas')) {
// 2.2 就把获取到的session值赋值到自定义并可执行的数组中
this.msgNum = JSON.parse(sessionStorage.getItem('datas'))
// 2.3 如果页面加载后没有session
} else {
// 2.4 就让当前的this.msgNum 从新赋值 并执行数据请求
this.msgNum = this.msgNum
this.axiosData()
};
}
},
//1. 首先执行 进行判断
created() {
this.sessionData()
}
})
</script>
</body>
使用sessionStorage进行数据存值的更多相关文章
- sessionStorage二种存值取值的方法
//方法一 sessionStorage.setItem('id1','这是一个测试id1'); //存入一个值key:value console.log(sessionStorage.getItem ...
- cookie的存值和取值方式
最近在开发中存储用户名信息,为了方便就使用了sessionStorage,但是写好才想到sessionStorage在IE下面是不支持的,所以无奈还是使用了cookie 那么接下来就谈谈怎么使用coo ...
- MVC5 网站开发之三 数据存储层功能实现
数据存储层在项目Ninesky.DataLibrary中实现,整个项目只有一个类Repository. 目录 奔跑吧,代码小哥! MVC5网站开发之一 总体概述 MVC5 网站开发之二 创建项目 ...
- windows环境下nutch2.x 在eclipse中实现抓取数据存进mysql详细步骤
nutch2.x 在eclipse中实现抓取数据存进mysql步骤 最近在研究nutch,花了几天时间,也遇到很多问题,最终结果还是成功了,在此记录,并给其他有兴趣的人提供参考,共同进步. 对nutc ...
- sessionStorage 的数据会在同一网站的多个标签页之间共享吗？这取决于标签页如何打开
一直以来,我所以为的 sessionStorage 的生命周期是这样的:在 sessionStorage 中存储的数据会在当前浏览器的同一网站的多个标签页中共享,并在此网站的最后一个标签页被关闭后清除 ...
- PHP中如何在数组中随机抽取n个数据的值 - array_rand()？
PHP中如何在数组中随机抽取n个数据的值? 最佳答案 array_rand() 在你想从数组中取出一个或多个随机的单元时相当有用.它接受 input 作为输入数组和一个可选的参数 num_req,指明 ...
- ASP.NET Cookie存值问题
想必 用Cookie存值已经是很普遍的了,我也是刚学习了一点皮毛,现在就记下一点知识,便于日后翻阅. 1.C#代码存取Cookie值 //用Request获取到客户端Cookie 判断是否为空 if ...
- Solr(六)Solr索引数据存放到HDFS下
Solr索引数据存放到HDFS下 一 新建solr core hdfs 方法:http://www.cnblogs.com/Matchman/p/7287385.html 二 修改solrconfig ...
- java通过jdbc访问mysql，update数据返回值的思考
java通过jdbc访问mysql,update数据返回值的思考 先不说那么多,把Java代码贴出来吧. public static void main(String[] args) throws I ...
随机推荐
- 题解-Codeforces1106全套
因为参加完wc后心情很差,而且在广州过年没Ubuntu,所以就没打这场比赛了,结果这套题全部1A了,现在看来真是错失良机 结果这场不计rating 今天是除夕,大家节日快乐 A. Lunar New ...
- 往服务器部署thinkphp5代码时要注意 pathinfo的问题
往服务器部署thinkphp5代码时要注意 pathinfo的问题 如果nginx没有做任何设置 要使用?s=/的方式访问地址 只需要修改3个地方就可以了,亲测成功,看代码有注解 location ~ ...
- 题解P3711：【仓鼠的数学题】
这题黑的丫!怎么会掉紫呢! noteskey 伯努利数... 这里 有介绍哟~ 写的非常详细呢~ 反正这题就是推柿子... 另外就是黈力算法的运用 QWQ 我们令 \(ANS(x)\) 为答案多项式, ...
- adb.exe 已停止工作解决办法
最近因为工作原因,接触了下Android Studio,在使用真机调试的时候碰到了adb.exe 已经停止工作的错误. 虽然网上有很多和我一样的教程,但是我觉的还是记录一下自己的情况比较好,毕竟每个人 ...
- 关于Failed to start component [StandardEngine[Catalina].StandardHost[localhost].StandardContext[/springmvc-demo-01-start]]出错的解决方法
出错的详情: 严重: A child container failed during start java.util.concurrent.ExecutionException: org.apache ...
- python实现目录大小计算（含子目录）
path=r"F:\\PYTHON\\day8\\ftp_server\\"#这里我直接写了固定地址,你可以自己输入 file_size = 0 def split_doc(pat ...
- python之re正则简单够用
0. 1.参考 Python正则表达式指南 https://docs.python.org/2/library/re.html https://docs.python.org/2/howto/rege ...
- numpy array的复制-【老鱼学numpy】
对象的引用 看例子: a = np.array([0, 1, 2, 3]) b = a a[0] = 5 print("b=", b) # 判断a和b是否是同样的地址 print( ...
- java实验-3
实验内容 1.XP基础 2.XP核心实践 3.相关工具 实验内容 一.在IDEA中使用工具(Code->Reformate Code)把下面代码重新格式化,再研究一下Code菜单,找出一项让自己 ...
- 咸鱼入门到放弃2--Servlet
Tomcat作为一款常用的servlet容器,其模型中包含了context容器对servlet行进管理. Servlet程序是由WEB服务器调用,web服务器收到客户端的Servlet访问请求后: ① ...