HTML5——Web Storage（上）

最新推荐文章于 2024-07-30 17:09:59 发布

is_Del

最新推荐文章于 2024-07-30 17:09:59 发布

阅读量71

点赞数

分类专栏： HTML5 文章标签： html5 javascript

本文链接：https://blog.csdn.net/del1026/article/details/115739247

版权

HTML5 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

Day4

今日份内容：Web Storage中Session Storage的使用
Session Storage：将数据保存在Session会话中。Session会话指在用户浏览网站时，从进入网站到关闭的期间，Session对象会保存用户这段时间浏览所保存的任何数据，Session失效时Session Storage也会随之丢失。

Session Storage

熟悉Session Storage接口
使用Session Storage存储数据

内容

使用Session Storage存储在线用户信息

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="sessinStorage.css" />
	</head>
	<body>
		<div id="loginDiv">
			<div class="header">
				<embed src="cuckoo.svg" width="100" type="image/svg+xml">
				<span class="title">布谷鸟直播室</span>
			</div>
			<hr>
			用户名：<input type="text" id="userName" />
			<input type="button" id="inputButton" value="进入直播间" />
		</div>
		<div id="">
			<table width="400px">
				<thead>
					<tr>
						<th>在线用户</th>
						<th width="180px">登录时间</th>
					</tr>
				</thead>
				<tbody id="resultTable">
					<tr>
						<td colspan="2">暂无用户</td>
					</tr>
				</tbody>
			</table>
		</div>

		<script type="text/javascript">
			var i = 1;
			//防止每次刷新是i重新计数
			if (sessionStorage.getItem("i") != null) {
				i = sessionStorage.getItem("i");
			}
			var inputButton = document.getElementById("inputButton");
			//向sessionStorage记录用户名
			inputButton.onclick = function() {
				var userName = document.getElementById("userName");
				if (userName.value == "") {
					alert("用户名不能为空");
					return;
				}
				var loginTime = formateTime(new Date());
				var user = {
					userName: userName.value,
					loginTime: loginTime
				}
				sessionStorage.setItem("user" + i, JSON.stringify(user));
				sessionStorage.setItem("i", ++i);
				userName.value = "";
				showOnLineUser();
			};
			//将sessionStorage中的在线用户以表格形式显示出来
			function showOnLineUser() {
				var result = "";
				if (sessionStorage.length == 0) {
					result = result + "<tr><td colspan = '2'>暂无用户</td></tr>";
				} else {
					for (var j = 0; j < sessionStorage.length; j++) {
						var key = sessionStorage.key(j);
						if (key != "i") {
							var user = JSON.parse(sessionStorage.getItem(key));
							result = result + "<tr><td>" + user.userName +
								"</td><td>" + user.loginTime + "</td></tr>";
						}
					}
				}
				var resultTable = document.getElementById("resultTable");
				resultTable.innerHTML = result;
			};
			//定义显示时间的方法
			function formateTime(myDate) {
				var year = myDate.getFullYear();
				var month = myDate.getMonth();
				var date = myDate.getDate();
				var hour = myDate.getHours();
				var minute = myDate.getMinutes();
				var dateString = year + "年" + month + "月" + date + "日" + hour + ":" + minute;
				return dateString;
			}
			showOnLineUser();
		</script>
	</body>
</html>

结果

在这里插入图片描述

PS

Session Storage只能用来存储字符串，对结构复杂的数据可以使用JSON.Stringify()方法将其转换为JSON字符串格式存储到Session Storage中。在显示数据时，将Session Storage中数据逐条取出，并使用JSON.parse()方法将JSON字符串格式数据转换为JSON对象，通过表格形式输出。

is_Del

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML5——Web Storage（上）

Day4今日份内容：Web Storage中Session Storage的使用Session Storage：将数据保存在Session会话中。Session会话指在用户浏览网站时，从进入网站到关闭的期间，Session对象会保存用户这段时间浏览所保存的任何数据，Session失效时Session Storage也会随之丢失。Session Storage熟悉Session Storage接口使用Session Storage存储数据内容使用Session Storage存储在线用户信息
复制链接

扫一扫