本地存储是一种有用的 Web 开发工具，使开发人员能够在用户的浏览器中保存数据。在本文中，我们将介绍本地存储的不同功能，从初学者级别的示例开始，然后继续介绍更复杂的技术。读完本指南后，您将对如何在 Web 应用程序中成功使用本地存储有基本的了解。
本地存储的初级示例
1。存储用户首选项：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User Preferences</title>
</head>
<body>
<label for="theme">Choose a theme:</label>
<select id="theme">
<option value="light">Light</option>
<option value="dark">Dark</option>
<option value="medium">Medium</option>
</select>
<button onclick="savePreference()">Save Preference</button>
<script>
function savePreference() {
const selectedTheme = document.getElementById('theme').value;
localStorage.setItem('theme', selectedTheme);
console.log('Preference saved:', selectedTheme);
alert('Preference saved!' + " " + selectedTheme);
}
</script>
</body>
</html>
当用户选择一个主题并点击“保存首选项”按钮时，此代码会将主题记录到控制台。要阅读此日志，请打开浏览器的开发人员工具（通常按 F12 或右键单击页面并选择“检查”）并转到控制台选项卡。（了解更多）
2。记住用户输入：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Remember User Input</title>
</head>
<body>
<input type="text" id="userInput">
<button onclick="saveInput()">Save Input</button>
<script>
function saveInput() {
const userInput = document.getElementById('userInput').value;
localStorage.setItem('savedInput', userInput);
console.log(userInput + " " + 'saved !');
alert('Input saved!');
}
</script>
</body>
</html>
此 HTML 示例生成一个简单的网页，允许用户在文本字段中输入文本并将其保存到浏览器的本地存储中。
当用户在输入框中输入文本并点击“保存输入”按钮时，文本将保存在浏览器的本地存储中。这意味着即使用户刷新网站或关闭并重新打开浏览器，保存的输入仍然可以访问。控制台日志和警报通知用户其输入已成功保存。 (阅读更多)
3。购物车持久化：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shopping Cart</title>
</head>
<body>
<h1>Shopping Cart</h1>
<ul id="cartItems"></ul>
<script>
document.addEventListener('DOMContentLoaded', () => {
const savedCart = JSON.parse(localStorage.getItem('cart')) || [];
const cartItemsElement = document.getElementById('cartItems');
savedCart.forEach(item => {
const li = document.createElement('li');
li.textContent = item;
cartItemsElement.appendChild(li);
});
console.log('Saved cart items:', savedCart);
});
function addToCart(item) {
const savedCart = JSON.parse(localStorage.getItem('cart')) || [];
savedCart.push(item);
localStorage.setItem('cart', JSON.stringify(savedCart));
console.log('Added', item, 'to cart');
location.reload(); // Refresh the page to reflect changes
}
</script>
<button onclick="addToCart('Item 1')">Add Item 1 to Cart</button>
<button onclick="addToCart('Item 2')">Add Item 2 to Cart</button>
<button onclick="addToCart('Item 3')">Add Item 3 to Cart</button>
</body>
</html>
此示例演示如何使用本地存储保存购物车。添加到购物车的商品将作为数组保存在本地存储中的“cart”键下。页面加载时，将从本地存储中提取并显示已保存的购物车项目。
当您单击“将商品 X 添加到购物车”按钮之一时，相应的商品将添加到购物车中，并且更新的购物车内容将显示在控制台中。要检查这些日志，请打开浏览器的开发人员工具（通常按 F12 或右键单击页面并选择“检查”）并转到控制台选项卡。
您还可以直接通过浏览器的开发者工具查看本地存储。大多数浏览器允许您通过右键单击页面，选择“检查”以获取开发人员工具，然后导航到“应用程序”或“存储”选项卡来执行此操作。从那里，展开“本地存储”部分以查看网站的键值对。在此示例中，键“cart”包含表示已保存的购物车项目的 JSON 字符串。
阅读全文 - 掌握 Web 开发中的本地存储：8 个实践示例，从新手到专家！
学习 Json - 点击这里
以上是掌握 Web 开发中的本地存储的详细内容。更多信息请关注PHP中文网其他相关文章！
