localStorage语法精讲及案例分析
1. 基本概念
localStorage用于在浏览器端长久地存储数据（以键值对形式），即便浏览器关闭了，数据也还在，除非主动去删除它，存储容量大概在 5MB 左右（不同浏览器有差别）。
2. 语法
-
存储数据：
例如，要存储用户名和用户年龄这两个信息，代码如下：
localStorage.setItem('username', 'Tom');
localStorage.setItem('age', '25');
-
读取数据：
想获取刚才存的用户名和年龄，像这样写：
const storedUsername = localStorage.getItem('username');
console.log(storedUsername);
const storedAge = localStorage.getItem('age');
console.log(storedAge);
-
删除数据：
要是想把年龄这个信息删掉，可以用：
localStorage.removeItem('age');
要是想清空所有存储的数据，那就用：
localStorage.clear();
3. 案例分析
假设有个简单的网页，用来记录用户喜欢的颜色，每次输入一个颜色并保存，下次打开页面还能看到之前保存的颜色。
HTML 结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<input type="text" id="colorInput" placeholder="输入喜欢的颜色">
<button id="saveButton">保存颜色</button>
<div id="colorDisplay"></div>
<script src="script.js"></script>
</body>
</html>
JavaScript 代码（script.js） ：
const colorInput = document.getElementById('colorInput');
const saveButton = document.getElementById('saveButton');
const colorDisplay = document.getElementById('colorDisplay');
saveButton.addEventListener('click', function () {
const color = colorInput.value;
if (color) {
localStorage.setItem('favoriteColor', color);
colorDisplay.textContent = `你喜欢的颜色是：${color}`;
}
});
window.onload = function () {
const savedColor = localStorage.getItem('favoriteColor');
if (savedColor) {
colorDisplay.textContent = `你喜欢的颜色是：${savedColor}`;
}
};
在这个案例里，用户在输入框输入喜欢的颜色后点击保存按钮，颜色就会被存储到 localStorage 里，并且页面上会显示出来。下次再打开这个网页时，页面能从 localStorage 中获取之前存的颜色并显示出来。
4. 存储复杂数据类型案例：
假设要存储用户的购物清单信息，购物清单里包含多个商品对象（每个商品有名称和数量属性），这就是相对复杂的数据类型（对象数组）了。
HTML 结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<button id="addItemButton">添加商品到购物清单</button>
<ul id="itemList"></ul>
<script src="script.js"></script>
</body>
</html>
JavaScript 代码（script.js） ：
const addItemButton = document.getElementById('addItemButton');
const itemList = document.getElementById('itemList');
// 用于存储购物清单的数组
let shoppingList = [];
addItemButton.addEventListener('click', function () {
const itemName = prompt('请输入商品名称');
const itemQuantity = prompt('请输入商品数量');
if (itemName && itemQuantity) {
// 创建商品对象
const item = {
name: itemName,
quantity: itemQuantity
};
shoppingList.push(item);
// 把购物清单数组转换为JSON字符串后存储到localStorage
localStorage.setItem('shoppingList', JSON.stringify(shoppingList));
// 展示购物清单到页面上
displayShoppingList();
}
});
function displayShoppingList() {
itemList.innerHTML = '';
const storedList = localStorage.getItem('shoppingList');
if (storedList) {
// 从localStorage取出JSON字符串并解析回对象数组
shoppingList = JSON.parse(storedList);
shoppingList.forEach(item => {
const listItem = document.createElement('li');
listItem.textContent = `${item.name} - 数量: ${item.quantity}`;
itemList.appendChild(listItem);
});
}
}
window.onload = function () {
displayShoppingList();
};
在这个案例里，用户点击 “添加商品到购物清单” 按钮后，按提示输入商品名称和数量，就会创建商品对象并添加到购物清单数组中，然后把这个数组转成 JSON 字符串存储到 localStorage 里，页面也会展示出当前的购物清单内容。下次打开页面时，会从 localStorage 取出数据解析后再次展示出来。
sessionStorage 语法精讲及案例分析
1. 基本概念
sessionStorage 是用来在当前浏览器会话（也就是当前打开的这个浏览器窗口或者标签页的时间段内）存储数据的，一旦关闭了这个窗口或者标签页，数据就没了，同样是以键值对存储，存储容量和 localStorage 类似。
2. 语法
-
存储数据：
比如记录用户本次会话中输入的一个单词，代码如下：
sessionStorage.setItem('word', 'apple');
-
读取数据：
想看看存的单词是什么，这么写：
const storedWord = sessionStorage.getItem('word');
console.log(storedWord);
-
删除数据：
要是不想保留这个单词了，用这个删除：
sessionStorage.removeItem('word');
要是想把 sessionStorage 里所有数据都清空，用这个：
sessionStorage.clear();
3. 案例分析
做一个简单的网页小游戏，记录用户在这一局游戏里的得分，只要关闭游戏页面（也就是当前会话结束），分数就重置。
HTML 结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>简单小游戏</h1>
<p>你当前的得分： <span id="scoreDisplay">0</span></p>
<button id="addScoreButton">加一分</button>
<script src="script.js"></script>
</body>
</html>
JavaScript 代码（script.js） ：
const scoreDisplay = document.getElementById('scoreDisplay');
const addScoreButton = document.getElementById('addScoreButton');
let score = 0;
addScoreButton.addEventListener('click', function () {
score++;
scoreDisplay.textContent = score;
sessionStorage.setItem('gameScore', score.toString());
});
window.onload = function () {
const savedScore = sessionStorage.getItem('gameScore');
if (savedScore) {
score = parseInt(savedScore);
scoreDisplay.textContent = score;
}
};
在这个案例里，用户每点击一次 “加一分” 按钮，分数就加 1，同时存储到 sessionStorage 里并在页面上显示出来。但要是关闭了这个游戏页面，下次再打开，分数又会从 0 开始，因为之前存储在 sessionStorage 里的分数数据随着会话结束被清除了。
4. 存储复杂数据类型案例：
假设做一个简单的网页问卷调查，在当前会话内收集用户填写的多个问题答案（每个问题答案可以用对象表示），关闭页面后数据就清除。
HTML 结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<form id="questionnaireForm">
<label for="question1">问题1：你平时喜欢的运动是什么？</label><br>
<input type="text" id="question1" placeholder="请输入答案"><br>
<label for="question2">问题2：你一周运动几次？</label><br>
<input type="text" id="question2" placeholder="请输入答案"><br>
<button type="submit">提交答案</button>
</form>
<div id="answerDisplay"></div>
<script src="script.js"></script>
</body>
</html>
JavaScript 代码（script.js） ：
const questionnaireForm = document.getElementById('questionnaireForm');
const answerDisplay = document.getElementById('answerDisplay');
questionnaireForm.addEventListener('submit', function (e) {
e.preventDefault();
const question1Answer = document.getElementById('question1').value;
const question2Answer = document.getElementById('question2').value;
if (question1Answer && question2Answer) {
const answerObject = {
question1: question1Answer,
question2: question2Answer
};
// 将答案对象数组（初始为空，每次添加一个新对象）存储在sessionStorage
let answerList = [];
const storedList = sessionStorage.getItem('answerList');
if (storedList) {
answerList = JSON.parse(storedList);
}
answerList.push(answerObject);
sessionStorage.setItem('answerList', JSON.stringify(answerList));
displayAnswers();
}
});
function displayAnswers() {
answerDisplay.innerHTML = '';
const storedList = sessionStorage.getItem('answerList');
if (storedList) {
const answerList = JSON.parse(storedList);
answerList.forEach((answer, index) => {
const div = document.createElement('div');
div.textContent = `第${index + 1}次提交：问题1答案 - ${answer.question1}，问题2答案 - ${answer.question2}`;
answerDisplay.appendChild(div);
});
}
}
window.onload = function () {
displayAnswers();
};
在这个案例中，用户填写问卷并提交后，答案会被整理成对象添加到数组里，然后将数组转成 JSON 字符串存储到 sessionStorage 中，同时在页面展示出来。但当关闭页面结束会话后，下次再打开，之前存储的数据就不存在了，因为 sessionStorage 只在当前会话有效。
