HTML5 Web 存储：超越 Cookie 的本地存储新选择

一、引言

在当今的 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

客户端存储数据主要通过两个对象实现：

1. localStorage：用于长久保存整个网站的数据，数据没有过期时间，直到手动删除。例如：

// 存储
localStorage.setItem("sitename", "菜鸟教程");
// 查找
document.getElementById("result").innerHTML = "网站名：" +  localStorage.getItem("sitename");

也可以使用点语法进行操作：

// 存储
localStorage.sitename = "菜鸟教程";
// 查找
document.getElementById("result").innerHTML = localStorage.sitename;

删除数据时，可以使用 localStorage.removeItem("sitename");，清空所有数据则使用 localStorage.clear();。

1. sessionStorage：用于临时保存同一窗口（或标签页）的数据，在关闭窗口或标签页之后数据会被删除。例如：

if (sessionStorage.clickcount) {
    sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
} else {
    sessionStorage.clickcount=1;
}
document.getElementById("result").innerHTML="在这个会话中你已经点击了该按钮 " + sessionStorage.clickcount + " 次 ";

五、Web Storage 应用实例

我们可以利用 Web 存储开发一个简单的网站列表程序，实现以下功能：

1. 输入网站名和网址，以网站名作为 key 存入 localStorage。
2. 根据网站名查找对应的网址。
3. 列出当前已保存的所有网站。

以下是实现这些功能的关键代码：

//保存数据  
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 存储的实践经验和技巧。