一、引言
在当今的 Web 开发领域，对于用户数据的本地存储需求日益增长。HTML5 带来了一种比传统 cookie 更强大、更安全、更高效的本地存储方式 ------Web 存储。本文将深入探讨 HTML5 Web 存储的相关知识，包括其基本概念、浏览器支持情况、localStorage 和 sessionStorage 的使用方法，以及如何利用它们开发实用的 Web 应用程序。
二、HTML5 Web 存储概述
HTML5 Web 存储允许开发者在本地存储用户的浏览数据。与早期使用的 cookie 不同，Web 存储的数据不会被发送到服务器，仅用于用户请求网站数据时，这大大提高了数据的安全性。而且，它能够存储大量数据，且不会对网站性能造成明显影响。数据以键 / 值对的形式存在，并且每个 web 网页的数据只能由该网页访问使用。
三、浏览器支持情况
主流浏览器如 Internet Explorer 8+、Firefox、Opera、Chrome 和 Safari 都支持 Web 存储。但需要注意的是，Internet Explorer 7 及更早版本不支持这一特性。在使用 Web 存储前，开发者应通过以下代码检查浏览器是否支持：
if(typeof(Storage)!=="undefined") {
// 是的! 支持 localStorage sessionStorage 对象!
// 一些代码.....
} else {
// 抱歉! 不支持 web 存储。
}四、localStorage 和 sessionStorage
客户端存储数据主要通过两个对象实现：
-
localStorage：用于长久保存整个网站的数据，数据没有过期时间，直到手动删除。例如：
// 存储
localStorage.setItem("sitename", "菜鸟教程");
// 查找
document.getElementById("result").innerHTML = "网站名：" + localStorage.getItem("sitename");
也可以使用点语法进行操作：
// 存储
localStorage.sitename = "菜鸟教程";
// 查找
document.getElementById("result").innerHTML = localStorage.sitename;删除数据时，可以使用 localStorage.removeItem("sitename");，清空所有数据则使用 localStorage.clear();。
-
sessionStorage：用于临时保存同一窗口（或标签页）的数据，在关闭窗口或标签页之后数据会被删除。例如：
if (sessionStorage.clickcount) {
sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
} else {
sessionStorage.clickcount=1;
}
document.getElementById("result").innerHTML="在这个会话中你已经点击了该按钮 " + sessionStorage.clickcount + " 次 ";
五、Web Storage 应用实例
我们可以利用 Web 存储开发一个简单的网站列表程序，实现以下功能：
- 输入网站名和网址，以网站名作为 key 存入
localStorage。 - 根据网站名查找对应的网址。
- 列出当前已保存的所有网站。
以下是实现这些功能的关键代码：
//保存数据
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;
}对应的 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>六、存储对象数据
当需要存储更复杂的数据时，我们可以使用 JSON.stringify 将对象转换为字符串进行存储，再使用 JSON.parse 将字符串转换回 JSON 对象。示例代码如下：
//保存数据
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;
}对应的 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>七、总结
HTML5 Web 存储为开发者提供了一种强大且实用的本地数据存储方式，通过合理使用 localStorage 和 sessionStorage，可以有效地提升 Web 应用程序的用户体验和数据管理效率。在实际开发中，我们应根据数据的使用场景和需求，灵活选择合适的存储方式，并注意数据格式的转换和错误处理，以确保应用程序的稳定性和可靠性。
希望本文对大家理解和使用 HTML5 Web 存储有所帮助，欢迎大家在评论区交流讨论，分享更多关于 Web 存储的实践经验和技巧。