HTML5 Web 存储学习笔记
HTML5 Web 存储是一种比传统 cookie 更安全、更高效的本地存储方式，它允许在用户的浏览器中存储数据，而无需将数据发送到服务器。Web 存储不仅可以存储大量数据，而且不会影响网站性能，数据以键/值对的形式存储，且仅允许创建它们的网页访问。
一、Web 存储的类型
HTML5 提供了两种 Web 存储类型：localStorage 和 sessionStorage。
1. localStorage
-
特点：存储的数据没有时间限制，即使浏览器关闭后，数据依然存在，直到手动清除。
-
适用场景：适用于需要长期保存的数据，例如用户偏好设置、主题模式等。
-
示例：
HTML复制
<!-- 保存数据 --> <script> if (typeof(Storage) !== "undefined") { localStorage.setItem("sitename", "菜鸟教程"); document.getElementById("result").innerHTML = "网站名：" + localStorage.getItem("sitename"); } else { document.getElementById("result").innerHTML = "抱歉，您的浏览器不支持 Web 存储。"; } </script>预览
2. sessionStorage
-
特点：存储的数据仅在当前浏览器标签页的会话期间可用，关闭标签页后数据会被删除。
-
适用场景：适用于临时数据，例如购物车中的商品、表单的临时数据等。
-
示例：
HTML复制
<!-- 保存数据 --> <script> if (typeof(Storage) !== "undefined") { sessionStorage.setItem("clickcount", 1); document.getElementById("result").innerHTML = "点击次数：" + sessionStorage.getItem("clickcount"); } else { document.getElementById("result").innerHTML = "抱歉，您的浏览器不支持 Web 存储。"; } </script>预览
二、Web 存储的基本操作
无论是 localStorage 还是 sessionStorage，它们的 API 是相同的，常用的有以下几种操作：
1. 保存数据
JavaScript复制
localStorage.setItem(key, value); // 保存数据
sessionStorage.setItem(key, value); // 保存数据2. 读取数据
JavaScript复制
localStorage.getItem(key); // 获取数据
sessionStorage.getItem(key); // 获取数据3. 删除数据
JavaScript复制
localStorage.removeItem(key); // 删除单个数据
sessionStorage.removeItem(key); // 删除单个数据
localStorage.clear(); // 清空所有数据
sessionStorage.clear(); // 清空所有数据4. 获取键名
JavaScript复制
localStorage.key(index); // 获取指定索引的键名
sessionStorage.key(index); // 获取指定索引的键名三、Web 存储的使用示例
1. 记录点击次数
以下示例展示了如何使用 localStorage 记录用户点击按钮的次数：
HTML复制
<button onclick="countClicks()">点击我</button>
<p id="result"></p>
<script>
function countClicks() {
if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "你已经点击了按钮 " + localStorage.clickcount + " 次";
}
</script>预览
2. 网站列表程序
以下示例展示了如何使用 localStorage 存储和查找网站信息：
HTML复制
<div style="border: 2px dashed #ccc; width: 320px; text-align: center;">
<label for="sitename">网站名(key)：</label>
<input type="text" id="sitename" name="sitename" class="text"/><br/>
<label for="siteurl">网址(value)：</label>
<input type="text" id="siteurl" name="siteurl"/><br/>
<input type="button" onclick="save()" value="新增记录"/><hr/>
<label for="search_site">输入网站名：</label>
<input type="text" id="search_site" name="search_site"/>
<input type="button" onclick="find()" value="查找网站"/>
<p id="find_result"><br/></p>
</div>
<script>
function save() {
var siteurl = document.getElementById("siteurl").value;
var sitename = document.getElementById("sitename").value;
localStorage.setItem(sitename, siteurl);
alert("添加成功");
}
function find() {
var search_site = document.getElementById("search_site").value;
var sitename = localStorage.getItem(search_site);
var find_result = document.getElementById("find_result");
find_result.innerHTML = search_site + "的网址是：" + sitename;
}
</script>预览
3. 存储复杂数据
以下示例展示了如何使用 JSON.stringify 和 JSON.parse 存储和读取复杂数据：
HTML复制
<div style="border: 2px dashed #ccc; width: 320px; text-align: center;">
<label for="keyname">别名(key):</label>
<input type="text" id="keyname" name="keyname" class="text"/><br/>
<label for="sitename">网站名：</label>
<input type="text" id="sitename" name="sitename" class="text"/><br/>
<label for="siteurl">网址：</label>
<input type="text" id="siteurl" name="siteurl"/><br/>
<input type="button" onclick="save()" value="新增记录"/><hr/>
<label for="search_site">输入别名(key)：</label>
<input type="text" id="search_site" name="search_site"/>
<input type="button" onclick="find()" value="查找网站"/>
<p id="find_result"><br/></p>
</div>
<script>
function save() {
var site = new Object();
site.keyname = document.getElementById("keyname").value;
site.sitename = document.getElementById("sitename").value;
site.siteurl = document.getElementById("siteurl").value;
var str = JSON.stringify(site);
localStorage.setItem(site.keyname, str);
alert("保存成功");
}
function find() {
var search_site = document.getElementById("search_site").value;
var str = localStorage.getItem(search_site);
var find_result = document.getElementById("find_result");
var site = JSON.parse(str);
find_result.innerHTML = search_site + "的网站名是：" + site.sitename + "，网址是：" + site.siteurl;
}
</script>