钟文志的部落格

Appearance

HTML5 Web 存储提供了一种在客户端（用户的浏览器）中存储数据的机制，使得开发者可以在用户的设备上保存数据而无需服务器端的支持。Web 存储主要包括两种存储方式：localStorage 和 sessionStorage。

1. localStorage ​

localStorage 用于存储持久化的数据，数据在浏览器会话结束后（即浏览器关闭后）依然存在。

特点： ​

  • 数据存储在浏览器中，没有过期时间，除非明确删除。
  • 不与具体的页面会话绑定，即使关闭并重新打开浏览器，数据仍然可用。
  • 每个域名最多可以存储 5MB 左右的数据（具体大小依浏览器而定）。

使用示例： ​

html
<!DOCTYPE html>
<html>
<head>
    <title>localStorage Example</title>
    <script>
        function saveData() {
            localStorage.setItem("username", document.getElementById("username").value);
        }

        function loadData() {
            var username = localStorage.getItem("username");
            if (username) {
                document.getElementById("display").innerText = "Welcome back, " + username;
            }
        }
    </script>
</head>
<body onload="loadData()">
    <h2>localStorage Example</h2>
    <input type="text" id="username" placeholder="Enter your name">
    <button onclick="saveData()">Save</button>
    <p id="display"></p>
</body>
</html>

2. sessionStorage ​

sessionStorage 用于存储会话数据，数据仅在浏览器会话（即浏览器窗口或标签页）期间可用，当会话结束（窗口或标签页关闭）时，数据会被清除。

特点： ​

  • 数据仅在当前浏览器窗口或标签页中可用。
  • 关闭窗口或标签页后，数据会被清除。
  • 每个域名最多可以存储 5MB 左右的数据（具体大小依浏览器而定）。

使用示例： ​

html
<!DOCTYPE html>
<html>
<head>
    <title>sessionStorage Example</title>
    <script>
        function saveData() {
            sessionStorage.setItem("sessionData", document.getElementById("sessionData").value);
        }

        function loadData() {
            var sessionData = sessionStorage.getItem("sessionData");
            if (sessionData) {
                document.getElementById("display").innerText = "Session Data: " + sessionData;
            }
        }
    </script>
</head>
<body onload="loadData()">
    <h2>sessionStorage Example</h2>
    <input type="text" id="sessionData" placeholder="Enter session data">
    <button onclick="saveData()">Save</button>
    <p id="display"></p>
</body>
</html>

Web 存储 API 方法 ​

常用方法： ​

  • setItem(key, value): 存储数据，key 是数据的键，value 是数据的值。
  • getItem(key): 获取数据，key 是数据的键，返回与该键关联的值。
  • removeItem(key): 删除数据，key 是数据的键。
  • clear(): 清除所有存储的数据。

示例： ​

javascript
// localStorage 示例
localStorage.setItem('username', 'Alice');
var username = localStorage.getItem('username'); // 获取 'Alice'
localStorage.removeItem('username'); // 删除 'username' 数据
localStorage.clear(); // 清除所有数据

// sessionStorage 示例
sessionStorage.setItem('sessionID', '123456');
var sessionID = sessionStorage.getItem('sessionID'); // 获取 '123456'
sessionStorage.removeItem('sessionID'); // 删除 'sessionID' 数据
sessionStorage.clear(); // 清除所有数据

适用场景 ​

  • localStorage 适用于需要长期保存的数据，例如用户偏好设置、应用配置等。
  • sessionStorage 适用于临时数据存储，例如表单数据、购物车信息等，只在当前会话期间需要。

通过使用 HTML5 Web 存储，开发者可以在客户端存储和读取数据，提升用户体验和应用性能。