<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进行数据存值的更多相关文章

  1. sessionStorage二种存值取值的方法

    //方法一 sessionStorage.setItem('id1','这是一个测试id1'); //存入一个值key:value console.log(sessionStorage.getItem ...

  2. cookie的存值和取值方式

    最近在开发中存储用户名信息,为了方便就使用了sessionStorage,但是写好才想到sessionStorage在IE下面是不支持的,所以无奈还是使用了cookie 那么接下来就谈谈怎么使用coo ...

  3. MVC5 网站开发之三 数据存储层功能实现

    数据存储层在项目Ninesky.DataLibrary中实现,整个项目只有一个类Repository.   目录 奔跑吧,代码小哥! MVC5网站开发之一 总体概述 MVC5 网站开发之二 创建项目 ...

  4. windows环境下nutch2.x 在eclipse中实现抓取数据存进mysql详细步骤

    nutch2.x 在eclipse中实现抓取数据存进mysql步骤 最近在研究nutch,花了几天时间,也遇到很多问题,最终结果还是成功了,在此记录,并给其他有兴趣的人提供参考,共同进步. 对nutc ...

  5. sessionStorage 的数据会在同一网站的多个标签页之间共享吗？这取决于标签页如何打开

    一直以来,我所以为的 sessionStorage 的生命周期是这样的:在 sessionStorage 中存储的数据会在当前浏览器的同一网站的多个标签页中共享,并在此网站的最后一个标签页被关闭后清除 ...

  6. PHP中如何在数组中随机抽取n个数据的值 - array_rand()？

    PHP中如何在数组中随机抽取n个数据的值? 最佳答案 array_rand() 在你想从数组中取出一个或多个随机的单元时相当有用.它接受 input 作为输入数组和一个可选的参数 num_req,指明 ...

  7. ASP.NET Cookie存值问题

    想必 用Cookie存值已经是很普遍的了,我也是刚学习了一点皮毛,现在就记下一点知识,便于日后翻阅. 1.C#代码存取Cookie值 //用Request获取到客户端Cookie  判断是否为空 if ...

  8. Solr(六)Solr索引数据存放到HDFS下

    Solr索引数据存放到HDFS下 一 新建solr core hdfs 方法:http://www.cnblogs.com/Matchman/p/7287385.html 二 修改solrconfig ...

  9. java通过jdbc访问mysql，update数据返回值的思考

    java通过jdbc访问mysql,update数据返回值的思考 先不说那么多,把Java代码贴出来吧. public static void main(String[] args) throws I ...

随机推荐

  1. Python3.6及以上pip安装pymssql错误的解决办法[Windows&Linux freetds安装]

    只有由于Python3.6装不上 pymssql,所以一直用Python3.5的版本. 报错界面 现在有了新的解决方法: 原帖如下: https://docs.microsoft.com/en-us/ ...

  2. Ubuntu 终端关机和重启命令

    原文地址:https://blog.csdn.net/zzc15806/article/details/80907779 (diss一下原文地址的作者,你也是转载的为何不添加原文链接?) 重启命令:1 ...

  3. C++设计模式——组合模式

    问题描述 上图,是一个公司的组织结构图,总部下面有多个子公司,同时总部也有各个部门,子公司下面有多个部门.如果对这样的公司开发一个OA系统,作为程序员的你,如何设计这个OA系统呢?先不说如何设计实现, ...

  4. filebeat_config

    Filebeat Prospector filebeat.prospectors: - input_type: log paths: - /var/log/apache/httpd-*.log doc ...

  5. saltstack 入门

    1.Saltstack是什么? saltstack 是一个异构平台基础设施管理工具,具有远程执行.配置管理.云管理.只需花费数分钟就可以运行起来,扩展性足以支撑上万台服务器,速度快,服务器之间秒级通讯 ...

  6. 帆软报表（finereport）常用函数

    1. SUM SUM(number1,number2,…):求一个指定单元格区域中所有数字之和.Number1,number2,…:1到30个参数或指定单元格区域中所有数字. 注: 函数将直接键入参数 ...

  7. 【原创】大数据基础之Spark（6）Spark Rdd Sort实现原理

    spark 2.1.1 spark中可以通过RDD.sortBy来对分布式数据进行排序,具体是如何实现的?来看代码: org.apache.spark.rdd.RDD /** * Return thi ...

  8. Vuex数据可视化

    参考:https://gitee.com/hjm100/codes/46towe9v28a1bxfqhc7kl34 Vuex虽然能存储数据,但是一刷新就没有了,如果要实现数据持久化,就需要用vuex- ...

  9. 阿里云ECS发送邮件到腾讯企业邮箱

    1.安装软件 yum install mailx yum install sendmail 2.配置 vim /etc/mail.rc在文件最后加上如下内容: set smtp=smtps://smt ...

  10. svn"database disk image is malformed"错误解决

    本文是svn出现类似如下问题的两种解决方案. svn: E200030: database disk image is malformed 一.最简单的方法,复制其它人的.svn/wc.db替换. 二 ...