当前位置：首页 > 行业动态 > 正文

html存储选择器

admin
行业动态
2025-05-03
5

HTML存储选择器包括localStorage和sessionStorage，均以键值对形式存储数据，前者数据持久化，后者仅存于会话期间，常用于保存用户偏好设置或临时状态

HTML存储选择器详解

数据属性存储（`data-`）

HTML5允许通过自定义data-属性在元素上直接存储数据,可通过CSS选择器或JavaScript访问。

语法示例：

<div id="user" data-name="张三" data-age="25"></div>

访问方式：

JavaScript：document.querySelector('#user').dataset.name
CSS：[data-name="张三"] { color: red; }

特性	说明
数据类型	仅支持字符串（需手动转换其他类型）
容量限制	无明确限制，但实际受HTML元素属性长度限制
生命周期	随DOM元素存在而存在，页面刷新后消失

Web存储API

包括localStorage和sessionStorage，通过window对象访问,需配合选择器操作元素。

关键方法：

setItem(key, value)：存储数据
getItem(key)：获取数据
removeItem(key)：删除数据

示例：绑定表单输入到存储

<input id="username" />
<button onclick="saveName()">保存</button>
<script>
function saveName() {
  const name = document.querySelector('#username').value;
  localStorage.setItem('username', name); // 存储到localStorage
}
</script>

特性	localStorage	sessionStorage
持久性	长期存在（除非手动清除）	会话结束/标签页关闭后失效
作用域	同源所有窗口共享	仅当前窗口/标签页有效
数据类型	字符串（需序列化对象）	同上

Cookie存储

通过document.cookie操作,常用于服务器交互时的状态保存。

示例：设置与读取Cookie

// 设置Cookie（7天有效期）
document.cookie = "token=abc123; max-age=604800";
// 读取Cookie
const token = document.querySelector('#token').innerText; // 假设显示在页面元素中

特性	说明
容量限制	单条Cookie约4KB，总数受限浏览器设置
传输范围	每次HTTP请求均会携带Cookie（可能影响性能）
安全性	需注意隐私泄露风险，敏感信息应避免存储

IndexedDB（结构化存储）

适用于大量数据存储，需通过indexedDB API操作,通常结合选择器动态展示数据。

示例：读取并显示数据

<div id="data-list"></div>
<script>
const db = new indexedDB.open('myDB'); // 假设已创建数据库
db.onsuccess = () => {
  const transaction = db.transaction('items');
  const store = transaction.objectStore('items');
  const request = store.getAll();
  request.onsuccess = () => {
    document.querySelector('#data-list').innerHTML = JSON.stringify(request.result);
  };
};
</script>

特性	说明
数据类型	支持复杂对象（需序列化/反序列化）
容量限制	通常约50MB~200MB（浏览器依赖）
操作复杂度	需异步API，适合高频读写场景