1 Web Storage 介绍
1.1 Web Storage 简介
随着互联网的快速发展，基于网页的应用越来越普遍，同时也变得越来越复杂，为了满足日益更新的需求，会经常性地在设备上存储本地数据，例如记录历史活动信息。传统方式使用 document.cookie 来进行存储，但是由于其存储的空间只有 4KB 左右，并且需要复杂的操作进行解析，给发开者带来诸多不便。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XG3kURVM-1671708859765)(MD文档.assets\webstorage-1.jpg)]
为此，HTML5 规范提出了本地存储的解决方案。
HTML5 的本地存储解决方案中定义了两个重要的API：Web Storage 和本地数据库 Web SQL Database。接下来我们将重点讲述 Web Storage 的基本用法。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u1Sj3fTc-1671708859767)(MD文档.assets/webstorage-2.png)]
- localStorage：用于长久保存整个网站的数据，保存的数据没有期限，直到手动去除。
- sessionStorage：用于临时保存同一窗口（或标签页）的数据，在关闭窗口（或标签页）之后将会删除这些数据。
1.2 Web Storage 的特点
- 设置数据和读取数据比较方便。
- 容量较大，sessionStorage 约 5M，localStorage 约 20M。
- 只能存储字符串，如果要存储 JSON 对象，可以使用
window.JSON对象的stringify()方法和parse()方法进行序列化和反序列化。
1.3 Web Storage 的浏览器支持
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ps7w0aPq-1671708859769)(MD文档.assets/webstorage-3.png)]
在使用 Web Storage 前，应检查浏览器是否支持 localStorage 和 sessionStorage：
if (typeof(Storage) !== 'undefined') {
console.log('支持 localStorage、sessionStorage 对象');
// 一些代码......
} else {
console.log('抱歉，不支持 web 存储');
}
2 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>
代码中的字符串值转换为数字类型。
3 sessionStorage 的使用
sessionStorage 方法针对一个 session（会话）进行数据存储。当用户关闭浏览器窗口后，数据会被删除。
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计数器</title>
<style>
input[type="number"] {
width: 30px;
text-align: center;
}
</style>
</head>
<body>
<span>计数器：</span>
<button onclick="add()">+</button>
<input type="number" id="result" value="0" readonly="readonly" />
<button onclick="sub()">-</button>
<script>
var number = 0;
var result = document.getElementById('result');
// 页面加载事件
window.onload = function() {
if (typeof(Storage) !== 'undefined') {
// 读取本地存储的数量
var str = sessionStorage.getItem('number');
if (str) {
number = parseInt(str);
result.value = number;
}
}
}
// 加数量
function add() {
number = number + 1;
sessionStorage.setItem('number', number); // 存储
result.value = number;
}
// 减数量
function sub() {
if (number == 0) {
return;
}
number = number - 1;
sessionStorage.setItem('number', number); // 存储
result.value = number;
}
</script>
</body>
</html>
4 简单的网站列表程序
功能需求：
- 可以输入网站名、网址，以网站名作为 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>
示例效果如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qEtPzPyH-1671708859770)(MD文档.assets\site-1.gif)]
5 章节总结
- Web Storage 介绍
- localStorage 的使用
- sessionStorage 的使用
- 简单的网站列表程序
示例效果如下：
[外链图片转存中…(img-qEtPzPyH-1671708859770)]
扫一扫
662
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
