Web Storage 介绍 localStorage 的使用 sessionStorage 的使用简单的网站列表程序

最新推荐文章于 2023-04-28 21:58:24 发布

谦逊的C.

最新推荐文章于 2023-04-28 21:58:24 发布

阅读量129

点赞数 1

文章标签：前端 json

本文链接：https://blog.csdn.net/m0_70146580/article/details/128412871

版权

1.1 目标

Web Storage 介绍
localStorage 的使用
sessionStorage 的使用
简单的网站列表程序

1.2 重点

localStorage 的使用
sessionStorage 的使用

1.3 难点

localStorage 的使用
sessionStorage 的使用

2 Web Storage 介绍

2.1 Web Storage 简介

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变得越来越复杂，为了满足日益更新的需求，会经常性地在设备上存储本地数据，例如记录历史活动信息。传统方式使用 document.cookie 来进行存储，但是由于其存储的空间只有 4KB 左右，并且需要复杂的操作进行解析，给发开者带来诸多不便。

HTML5 的本地存储解决方案中定义了两个重要的API：Web Storage 和本地数据库 Web SQL Database。接下来我们将重点讲述 Web Storage 的基本用法。

localStorage：用于长久保存整个网站的数据，保存的数据没有期限，直到手动去除。
sessionStorage：用于临时保存同一窗口（或标签页）的数据，在关闭窗口（或标签页）之后将会删除这些数据。

2.2 Web Storage 的特点

设置数据和读取数据比较方便。
容量较大，sessionStorage 约 5M，localStorage 约 20M。
只能存储字符串，如果要存储 JSON 对象，可以使用 window.JSON 对象的 stringify() 方法和 parse() 方法进行序列化和反序列化。

2.3 Web Storage 的浏览器支持

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r3sANXkw-1671709936707)(D:\日常作业\文档\014 MD文档\MD文档.assets\webstorage-3.png)]

在使用 Web Storage 前，应检查浏览器是否支持 localStorage 和 sessionStorage：

3 localStorage 的使用

localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

不管是 localStorage，还是 sessionStorage，可使用的 API 方法和属性都相同：

方法和属性	描述
setItem(key, value)	该方法接收一个键名和值作为参数，将会把键值对添加到存储中，如果键名已存在，则更新其对应的值。
getItem(key)	该方法接收一个键名作为参数，返回键名对应的值。
removeItem(key)	该方法接收一个键名作为参数，并把该键名和值从存储中删除。
length	类似数组的 length 属性，用于访问 Storage 对象中 item 的数量。
key(n)	用于访问第 n 个 key 的名称。
clear()	清除当前域下的所有键值对。

示例 1，存储和移除字符串：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>存储和移除字符串</title>
	</head>
	<body>
		<button onclick="save()">存储</button>
		<button onclick="read()">读取</button>
		<button onclick="remove()">移除</button>
		<p>存储的值：<span id="result"></span></p>
		<script>
			function save() {
				// 存储字符串
				localStorage.sitename = '百度一下';
			}

			function read() {
				// 读取字符串
				document.getElementById('result').innerText = localStorage.sitename;
			}

			function remove() {
				// 移除字符串
				localStorage.removeItem('sitename');
			}
		</script>
	</body>
</html>

键/值对通常以字符串存储，你可以按自己的需要转换该格式

示例 2，存储用户点击次数：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>存储用户点击次数</title>
	</head>
	<body>
		<button onclick="btnClick()">按钮</button>
		<p>点击次数：<span id="result"></span></p>
		<script>
			var hits = 0;
			var result = document.getElementById('result');
			
			// 页面加载事件
			window.onload = function() {
				// 读取本地存储的点击次数
				var str = localStorage.getItem('hits');
				if (str) {
					hits = parseInt(str);
				}
				result.innerText = hits;
			}

			// 按钮点击事件
			function btnClick() {
				hits = hits + 1; // 次数+1
				localStorage.setItem('hits', hits); // 存储
				result.innerText = hits;
			}
		</script>
	</body>
</html>

代码中的字符串值转换为数字类型。

4 sessionStorage 的使用

sessionStorage 方法针对一个 session（会话）进行数据存储。当用户关闭浏览器窗口后，数据会被删除

5 简单的网站列表程序

功能需求：

可以输入网站名、网址，以网站名作为 key 存入 localStorage；
可以输入网站名，查找网址；
可以列出当前已保存的所有网站

示例代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>简单的网站列表程序</title>
		<style>
			.box {
				width: 300px;
				padding: 15px 20px;
				border: 1px dotted #cccccc;
				margin: 20px 0;
			}
			
			table {
				border-collapse: collapse;
			}
			
			table td {
				padding: 4px 8px;
				border: 1px solid #cccccc;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div>
				名称：<input type="text" id="input-name" value="" placeholder="请输入名称" />
			</div>
			<div>
				网址：<input type="text" id="input-site" value="" placeholder="请输入网址" />
			</div>
			<div>
				<button onclick="add()">添加</button>
			</div>
		</div>
		<div class="box">
			<div>
				名称：<input type="text" id="search-name" value="" placeholder="请输入名称" />
			</div>
			<div>
				<button onclick="search()">搜索</button>
			</div>
			<div>
				<button onclick="searchAll()">查看所有</button>
			</div>
		</div>
		<div class="box">
			<div>结果：</div>
			<div id="result">暂未查询到任何数据</div>
		</div>
		<script>
			var inputName = document.getElementById('input-name');
			var inputSite = document.getElementById('input-site');
			var searchName = document.getElementById('search-name');
			var result = document.getElementById('result');

			// 添加
			function add() {
				var name = inputName.value;
				if (!name) {
					alert('请输入名称！');
					return;
				}
				var site = inputSite.value;
				if (!site) {
					alert('请输入网址！');
					return;
				}
				localStorage.setItem(name, site);
				alert('添加成功！');
				inputName.value = '';
				inputSite.value = '';
			}

			// 搜索
			function search() {
				var name = searchName.value;
				if (!name) {
					result.innerText = '暂未查询到任何数据';
				} else {
					var site = localStorage.getItem(name);
					if (!site) {
						result.innerText = '暂未查询到任何数据';
					} else {
						var elementStr = '<table>'
						elementStr += '<tr><td>名称</td><td>网址</td></tr>';
						elementStr += `<tr><td>${name}</td><td>${site}</td></tr>`;
						elementStr += '</table>';
						result.innerHTML = elementStr;
					}
				}
			}

			// 查看所有
			function searchAll() {
				console.log(localStorage.length);
				if (localStorage.length > 0) {
					var elementStr = '<table>'
					elementStr += '<tr><td>名称</td><td>网址</td></tr>';
					for (var i = 0; i < localStorage.length; i++) {
						var name = localStorage.key(i);
						var site = localStorage.getItem(name);
						elementStr += `<tr><td>${name}</td><td>${site}</td></tr>`;
					}
					elementStr += '</table>';
					result.innerHTML = elementStr;
				} else {
					result.innerText = '暂未查询到任何数据';
				}
			}
		</script>
	</body>
</html>

getItem(name);
elementStr += <tr><td>${name}</td><td>${site}</td></tr>;
}
elementStr += ‘’;
result.innerHTML = elementStr;
} else {
result.innerText = ‘暂未查询到任何数据’;
}
}

```

谦逊的C.

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Web Storage 介绍 localStorage 的使用 sessionStorage 的使用简单的网站列表程序

web storage介绍localStorage的使用sessionStorage的使用简单的网站列表程序
复制链接

扫一扫