中信建设有限责任公司 乔锋 电话杭州seo薪资水平

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>