HTML5WebStorage详解：localStorage与sessionStorage的使用与示例-优快云博客

本文详细介绍了HTML5中的WebStorage，特别是localStorage和sessionStorage的区别，以及如何在网页中使用它们进行数据持久化和临时存储。还提供了实际的代码示例，如网站列表程序的保存、查找和删除功能，以及如何处理更复杂的对象数据存储。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML5 Web存储

客户端存储数据的两个对象为：
localStorage 和 sessionStorage

localStorage
用于长久保存整个网站的数据，保存的数据没有过期时间，知道手动去除。

sessionStorage
用于临时保存同一窗口（或标签页的数据，在关闭窗口或标签页之后将会删除这些数据）

localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>对象存储</title>
</head>
<body>

<div id="result"></div>
<script>
if(typeof(Storage)!=="undefined")
{
  // 存储
  localStorage.setItem("kk", "海公牛");
  // 查找
  document.getElementById("result").innerHTML = "网站名：" +  localStorage.getItem("kkk");
}
else
{
  document.getElementById("result").innerHTML="对不起，您的浏览器不支持 web 存储。";
}
</script>

</body>
</html>

不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：

1、保存数据：localStorage.setItem(key,value);
2、读取数据：localStorage.getItem(key);
3、删除单个数据：localStorage.removeItem(key);
4、删除所有数据：localStorage.clear();
5、得到某个索引的key：localStorage.key(index);
提示: 键/值对通常以字符串存储，你可以按自己的需要转换该格式。

Web Storage 开发一个简单的网站列表程序

网站列表程序实现以下功能：
1、可以输入网站名，网址，以网站名作为key存localStorage；
2、根据网站名，查找网址；
3、列出当前已保存的所有网站；
以下代码用于保存与查找数据（save() 与 find() 方法）：

//保存数据  
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;  
}

完整实例演示如下：

<!DOCTYPE html>
<html>
<head>
  <title>网站列表程序</title>
  <script>
    function saveWebsite() {
      var name = document.getElementById("name").value;
      var url = document.getElementById("url").value;
      
      // 使用网站名作为key，将网址存入localStorage
      localStorage.setItem(name, url);
      
      // 清空输入框
      document.getElementById("name").value = "";
      document.getElementById("url").value = "";
      
      // 刷新网站列表
      displayWebsites();
    }
    
    function searchWebsite() {
      var name = document.getElementById("search").value;
      
      // 根据网站名查找网址
      var url = localStorage.getItem(name);
      
      if(url) {
        alert("网址：" + url);
      } else {
        alert("未找到该网站！");
      }
    }
    
    function displayWebsites() {
      var websitesDiv = document.getElementById("websites");
      websitesDiv.innerHTML = "";
      
      // 遍历localStorage中的所有网站
      for(var i = 0; i < localStorage.length; i++) {
        var name = localStorage.key(i);
        var url = localStorage.getItem(name);
        
        // 创建网站列表项
        var websiteItem = document.createElement("li");
        websiteItem.textContent = name + ": " + url;
        
        // 将网站列表项添加到列表中
        websitesDiv.appendChild(websiteItem);
      }
    }
  </script>
</head>
<body>
  <h1>网站列表</h1>
  
  <label for="name">网站名：</label>
  <input type="text" id="name"><br>
  
  <label for="url">网址：</label>
  <input type="text" id="url"><br>
  
  <button onclick="saveWebsite()">保存网站</button>
  
  <h2>查找网站</h2>
  
  <label for="search">网站名：</label>
  <input type="text" id="search">
  <button onclick="searchWebsite()">查找</button>
  
  <h2>已保存的网站</h2>
  
  <ul id="websites"></ul>
  
  <script>
    // 页面加载时显示已保存的网站
    displayWebsites();
  </script>
</body>
</html>

效果图如下：
在这里插入图片描述这只是非常简单的存储与查找，更多情况下我们存储的数据会更复杂。
接下来我们将使用 JSON.stringify 来存储对象数据、JSON.stringify 可以将对象转换为字符串

var site = new Object;
…
var str = JSON.stringify(site);//////将对象转换为字符串

之后我们使用 JSON.parse 方法将字符串转换为 JSON 对象

var site = JSON.parse(str);

增加了删除方法，并简单优化了添加和删除，每次执行完都会刷新页面显示的最新操作的数据

//删除数据
function del(name) {
localStorage.removeItem(name);
alert(“删除成功!”);
loadAll();
}

存储练习：写一个登陆页面把账号密码都储存起来：

<!DOCTYPE html>
<html>
<head>
  <title>写一个登陆页面把账号密码储存起来</title>
  <script>
    function login() {
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;
   
    localStorage.setItem("username", username);
    localStorage.setItem("password", password);
      }
  </script>
</head>
<body>
  <form onsubmit="event.preventDefault(); login();">
    <label for="username">账号:</label>
    <input type="text" id="username" required><br>
    <label for="password">密码:</label>
    <input type="password" id="password" required><br>
    <input type="submit" value="登录">
  </form>
</body>
</html>