HTML5常用的本地存储方式有哪些?

发布于 2024-05-18  191 次阅读


本文于 2024年5月18日 9:33 更新,注意查看最新内容

HTML5的本地存储方式是现代Web开发中常用的一种技术,它允许网页在用户的浏览器中存储数据,以便在不同页面或会话之间进行共享或持久化保存。本文将详细介绍HTML5中常用的本地存储方式,并对其进行详细介绍和比较。

1. localStorage

localStorage 是HTML5中最常见的本地存储方式之一,它允许网页在用户浏览器中以键值对的形式存储数据,并且数据不会随着会话结束而丢失。这意味着即使用户关闭浏览器,数据仍然会保留在浏览器中。

javascript

// 存储数据
localStorage.setItem('key', 'value');

// 读取数据
const value = localStorage.getItem('key');

// 删除数据
localStorage.removeItem('key');

// 清空所有数据
localStorage.clear();

2. sessionStorage

sessionStoragelocalStorage 类似,但是存储的数据在会话结束时会被清除,因此它适合用于临时保存会话数据。

javascript

// 存储数据
sessionStorage.setItem('key', 'value');

// 读取数据
const value = sessionStorage.getItem('key');

// 删除数据
sessionStorage.removeItem('key');

// 清空所有数据
sessionStorage.clear();

3. IndexedDB

IndexedDB 是HTML5提供的一种更为强大和灵活的本地数据库存储方式,它允许网页在用户浏览器中创建数据库,并进行复杂的数据存取操作。

javascript

// 打开数据库
const request = indexedDB.open('databaseName', version);

// 创建对象存储空间
request.onupgradeneeded = function(event) {
const db = event.target.result;
const objectStore = db.createObjectStore('storeName', { keyPath: 'id' });
};

// 存储数据
const transaction = db.transaction(['storeName'], 'readwrite');
const objectStore = transaction.objectStore('storeName');
objectStore.add({ id: 1, name: 'value' });

// 读取数据
const request = objectStore.get(1);
request.onsuccess = function(event) {
const value = event.target.result.name;
};

// 删除数据
objectStore.delete(1);

// 清空所有数据
objectStore.clear();

4. Web SQL Database

Web SQL Database 是一种使用SQL语言进行数据存储和查询的本地数据库存储方式,但是它并不是HTML5规范的一部分,且已被废弃,不建议在新项目中使用。

javascript

// 打开数据库
const db = openDatabase('databaseName', '1.0', 'description', 5 * 1024 * 1024);

// 执行SQL语句
db.transaction(function(tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS tableName (id unique, data)');
tx.executeSql('INSERT INTO tableName (id, data) VALUES (?, ?)', [1, 'value']);
tx.executeSql('SELECT * FROM tableName', [], function(tx, result) {
for (let i = 0; i < result.rows.length; i++) {
const row = result.rows.item(i);
console.log(row.id + ', ' + row.data);
}
});
});

5. Cookies

虽然不是HTML5规范的一部分,但是 Cookies 也是一种常用的本地存储方式。它通过浏览器的 document.cookie 属性来存储数据,但是它有限制和安全性问题,因此不适合存储大量数据或敏感信息。

javascript
// 设置Cookie
document.cookie = 'key=value; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/';

// 读取Cookie
const cookies = document.cookie;

// 删除Cookie
document.cookie = 'key=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/';

;

总结

HTML5提供了多种本地存储方式,每种方式都有其特点和适用场景。开发者可以根据具体需求选择合适的存储方式,在提升用户体验和数据管理方面发挥作用。


这短短的一生,我们最终都会失去。