LocalStorage Demo
创作时间:
作者:
@小白创作中心
LocalStorage Demo
引用
1
来源
1.
https://docs.pingcode.com/baike/3126960
HTML5提供了多种本地存储方式，每种方式都有其独特的优势和适用场景。了解并合理应用这些存储方式，可以提升Web应用的用户体验和性能。
HTML5实现本地存储的主要方法包括localStorage、sessionStorage、Web SQL Database、IndexedDB。在这些方法中，localStorage和sessionStorage是最常用和最简单的方法。localStorage允许你在用户的浏览器中存储数据，并且数据没有过期时间。sessionStorage类似于localStorage，但它只在浏览器会话期间有效。接下来，我们将详细探讨这些方法，以及它们在不同场景下的应用。
一、LocalStorage
1、基本概念
LocalStorage是HTML5提供的一种用于在用户的浏览器中存储数据的机制。数据保存在客户端，并且没有过期时间，除非手动清除，否则数据会一直存在。
2、使用方法
设置数据
localStorage.setItem('key', 'value');
获取数据
var value = localStorage.getItem('key');
删除数据
localStorage.removeItem('key');
清空所有数据
localStorage.clear();
3、应用场景
LocalStorage非常适合用于存储用户设置、应用状态、少量的缓存数据等。由于它的持久性，用户即使关闭浏览器，数据也不会丢失。
4、实例讲解
假设我们有一个简单的网页应用，用户可以选择主题颜色并保存。我们可以使用LocalStorage来存储用户的选择。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LocalStorage Demo</title>
<style>
body {
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1>Choose a Theme Color</h1>
<button onclick="setTheme('light')">Light Theme</button>
<button onclick="setTheme('dark')">Dark Theme</button>
<script>
function setTheme(theme) {
localStorage.setItem('theme', theme);
document.body.className = theme;
}
// Apply the stored theme when the page loads
window.onload = function() {
var theme = localStorage.getItem('theme');
if (theme) {
document.body.className = theme;
}
}
</script>
</body>
</html>
二、SessionStorage
1、基本概念
SessionStorage和LocalStorage非常相似，但是它的数据只在浏览器会话期间存在。当用户关闭浏览器窗口或标签页时，数据会被清除。
2、使用方法
设置数据
sessionStorage.setItem('key', 'value');
获取数据
var value = sessionStorage.getItem('key');
删除数据
sessionStorage.removeItem('key');
清空所有数据
sessionStorage.clear();
3、应用场景
SessionStorage适用于存储用户在单次会话中的数据，例如表单数据、临时状态等。它的短暂性确保了数据不会在用户关闭浏览器后继续存在。
4、实例讲解
假设我们有一个多步骤的表单，用户在每一步中输入的数据可以使用SessionStorage来保存。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SessionStorage Demo</title>
</head>
<body>
<h1>Step-by-Step Form</h1>
<form id="stepForm">
<label for="step1">Step 1:</label>
<input type="text" id="step1" name="step1">
<br>
<label for="step2">Step 2:</label>
<input type="text" id="step2" name="step2">
<br>
<button type="button" onclick="saveStep()">Save Step</button>
<button type="submit">Submit</button>
</form>
<script>
function saveStep() {
var step1 = document.getElementById('step1').value;
var step2 = document.getElementById('step2').value;
sessionStorage.setItem('step1', step1);
sessionStorage.setItem('step2', step2);
}
// Load the stored steps when the page loads
window.onload = function() {
var step1 = sessionStorage.getItem('step1');
var step2 = sessionStorage.getItem('step2');
if (step1) {
document.getElementById('step1').value = step1;
}
if (step2) {
document.getElementById('step2').value = step2;
}
}
</script>
</body>
</html>
三、Web SQL Database
1、基本概念
Web SQL Database是一个基于SQL的客户端存储方案，允许开发者在用户的浏览器中创建和操作数据库。虽然W3C已经停止维护这个规范，但一些浏览器仍然支持它。
2、使用方法
创建数据库
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
创建表
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
});
插入数据
db.transaction(function (tx) {
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "Log message")');
});
查询数据
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
var len = results.rows.length, i;
for (i = 0; i < len; i++) {
console.log(results.rows.item(i).log);
}
}, null);
});
3、应用场景
Web SQL Database适用于需要复杂查询和大量数据存储的应用，例如离线应用、数据密集型应用等。
4、实例讲解
假设我们有一个简单的日志记录应用，每次用户输入日志时，会将日志存储在Web SQL Database中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web SQL Database Demo</title>
</head>
<body>
<h1>Log Messages</h1>
<input type="text" id="logMessage" placeholder="Enter log message">
<button onclick="addLog()">Add Log</button>
<ul id="logList"></ul>
<script>
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id INTEGER PRIMARY KEY, log TEXT)');
});
function addLog() {
var logMessage = document.getElementById('logMessage').value;
db.transaction(function (tx) {
tx.executeSql('INSERT INTO LOGS (log) VALUES (?)', [logMessage]);
});
displayLogs();
}
function displayLogs() {
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
var logList = document.getElementById('logList');
logList.innerHTML = '';
for (var i = 0; i < results.rows.length; i++) {
var li = document.createElement('li');
li.textContent = results.rows.item(i).log;
logList.appendChild(li);
}
});
});
}
window.onload = displayLogs;
</script>
</body>
</html>
四、IndexedDB
1、基本概念
IndexedDB是一个低级API，用于客户端存储大量的结构化数据。它使用索引来实现高效的查询。IndexedDB是HTML5本地存储的最新标准，适用于需要存储和检索大量数据的应用。
2、使用方法
打开数据库
var request = indexedDB.open('mydb', 1);
request.onupgradeneeded = function(event) {
var db = event.target.result;
db.createObjectStore('mystore', { keyPath: 'id' });
};
添加数据
request.onsuccess = function(event) {
var db = event.target.result;
var transaction = db.transaction(['mystore'], 'readwrite');
var store = transaction.objectStore('mystore');
store.add({ id: 1, name: 'John Doe' });
};
获取数据
var request = indexedDB.open('mydb', 1);
request.onsuccess = function(event) {
var db = event.target.result;
var transaction = db.transaction(['mystore']);
var store = transaction.objectStore('mystore');
var getRequest = store.get(1);
getRequest.onsuccess = function() {
console.log(getRequest.result.name);
};
};
3、应用场景
IndexedDB适用于需要存储和检索大量结构化数据的应用，例如离线Web应用、复杂的数据密集型应用等。它的高效查询能力使其成为复杂数据操作的理想选择。
4、实例讲解
假设我们有一个简单的用户管理应用，可以添加和检索用户信息，我们可以使用IndexedDB来存储用户数据。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IndexedDB Demo</title>
</head>
<body>
<h1>User Management</h1>
<input type="text" id="userName" placeholder="Enter user name">
<button onclick="addUser()">Add User</button>
<ul id="userList"></ul>
<script>
var db;
var request = indexedDB.open('userdb', 1);
request.onupgradeneeded = function(event) {
db = event.target.result;
db.createObjectStore('users', { keyPath: 'id', autoIncrement: true });
};
request.onsuccess = function(event) {
db = event.target.result;
displayUsers();
};
function addUser() {
var userName = document.getElementById('userName').value;
var transaction = db.transaction(['users'], 'readwrite');
var store = transaction.objectStore('users');
store.add({ name: userName });
displayUsers();
}
function displayUsers() {
var transaction = db.transaction(['users']);
var store = transaction.objectStore('users');
var request = store.getAll();
request.onsuccess = function() {
var userList = document.getElementById('userList');
userList.innerHTML = '';
request.result.forEach(function(user) {
var li = document.createElement('li');
li.textContent = user.name;
userList.appendChild(li);
});
};
}
</script>
</body>
</html>
五、Comparison of Storage Methods
1、LocalStorage vs SessionStorage
- LocalStorage：数据持久化存储，适用于需要长期保存的数据。
- SessionStorage：数据会话存储，适用于短期临时数据。
2、Web SQL Database vs IndexedDB
- Web SQL Database：基于SQL的存储方式，适用于需要复杂查询的应用。
- IndexedDB：面向对象的存储方式，适用于需要存储大量结构化数据的应用。
3、选择建议
选择哪种存储方式取决于应用的需求：
- 少量持久化数据：使用LocalStorage。
- 少量会话数据：使用SessionStorage。
- 需要复杂查询：使用Web SQL Database。
- 大量结构化数据：使用IndexedDB。
总的来说，HTML5提供了多种本地存储方式，每种方式都有其独特的优势和适用场景。了解并合理应用这些存储方式，可以提升Web应用的用户体验和性能。
热门推荐
碳化硅产业市场推广策略全解析
如何增厚脸部角质层
如何评估一个城市的交通状况？这种评估对居民生活有何影响？
百日咳疫情爆发，婴幼儿如何预防？
詹黑记者的深度关注：揭示勒布朗·詹姆斯在NBA中的影响力与争议
股票投资必懂：五种主流选股策略全解析
华严宗祖庭长安华严寺，曾经辉煌后来衰败，仅存两座千年佛塔
项目管理如何设置加班
新产品导入（NPI）流程简介
好戏在民间！西咸新区举办群众秦腔擂台赛暨移风易俗宣传推广活动
FPGA开发实战之“模块实例化中的端口映射陷阱”
烫伤了千万不能涂酱油，也不能涂牙膏！正确的做法是...
如何提升小区的安全防范体系和应急处理能力？这种提升需要哪些方面的技术和设备支持？
风水植物：十种具有化煞功效的植物
律师如何进行合同审查
起诉流程全攻略：依法维护你的合法权益
考勤与薪资确认单的保存期限是多久？
什么叫耳顺之年，60岁为什么叫耳顺之年？
妈妈属鼠孩子属马好不好？会相冲吗？
唯美主义：艺术的纯粹美学追求
通达信公式编写：基本面、指标、K线形态选股和买卖点
个体工商户如何办理税务登记及申报纳税步骤详解
个体工商户如何做账：合规与税务优化实务分析
药用级甘油性质及用途
9月宝宝辅食攻略：营养美味两不误，轻松带娃！
手指脱皮是什么原因导致的怎么治疗
悲观性格是怎么形成的原因
蓝宝石金属化与传统金属化方法比较
厚植生态底色 绘就发展新卷 ——陕西省榆林市以绿色低碳转型引领城市高质量发展
中国古代神话玄武形象的来源