本地存储 localStorage 和 sessionStorage 的区别与使用案例
本地存储 localStorage 和 sessionStorage 的区别与使用案例
什么是本地存储
在网页开发里，有时候我们需要把一些数据存到用户的浏览器里，这样下次用户再打开网页的时候，这些数据还能用。localStorage 和 sessionStorage 就是浏览器提供给我们用来做这件事的两个工具。它们就像是浏览器给我们每个人发的一个小仓库，我们可以把一些东西（数据）存进去。
区别
1. 数据有效期
localStorage：它就像是一个长期的大仓库，只要你把东西存进去了，除非你手动把它删掉，或者用户把浏览器的缓存清了，不然这些东西会一直存在。比如说，你在一个购物网站上存了自己喜欢的商品列表到localStorage里，那下次不管你啥时候再打开这个网站，这个列表都还在。sessionStorage：它更像是一个临时的小仓库，只在当前的会话期间有效。啥是会话呢？简单说就是你打开一个网页到关闭这个网页的这段时间。一旦你关闭了当前的浏览器窗口或者标签页，存在sessionStorage里的东西就会自动消失。比如你在一个在线文档编辑网站上，用sessionStorage存了还没保存的文档内容，当你关闭这个标签页后，这些内容就没了。
2. 数据共享范围
localStorage：只要是同一个域名下的网页，不管是哪个页面存的数据，其他页面都能访问到。就好比同一个小区的居民都能去小区的公共仓库拿东西一样。比如说，你在www.example.com/page1.html这个页面存了数据到localStorage里，在www.example.com/page2.html这个页面也能把这些数据取出来用。sessionStorage：它的数据只能在同一个窗口（或者标签页）的不同页面之间共享。如果开了一个新的窗口或者标签页，就算是同一个域名的网页，也访问不到之前窗口里sessionStorage存的数据。这就像是每个房间都有自己的小柜子，别的房间的人看不到你柜子里的东西。
使用案例
localStorage 的使用案例
场景：记住用户的偏好设置，比如在一个新闻网站上，用户可以选择自己喜欢的新闻分类，下次打开网站的时候还显示这些分类。
代码示例：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>localStorage 示例</title>
</head>
<body>
<label for="category">选择新闻分类：</label>
<select id="category">
<option value="sports">体育</option>
<option value="tech">科技</option>
<option value="entertainment">娱乐</option>
</select>
<button onclick="savePreference()">保存偏好</button>
<script>
// 保存用户的偏好设置到 localStorage
function savePreference() {
var category = document.getElementById('category').value;
// 把选择的分类存到 localStorage 里，键名是 'newsCategory'
localStorage.setItem('newsCategory', category);
alert('偏好设置已保存！');
}
// 页面加载时检查 localStorage 里是否有保存的偏好设置
window.onload = function () {
var savedCategory = localStorage.getItem('newsCategory');
if (savedCategory) {
// 如果有保存的偏好设置，就把下拉框的值设置为保存的值
document.getElementById('category').value = savedCategory;
}
};
</script>
</body>
</html>在这个例子里，用户选择一个新闻分类后，点击 "保存偏好" 按钮，选择的分类就会被存到 localStorage 里。下次打开这个页面的时候，页面会检查 localStorage 里有没有保存的分类，如果有就把下拉框的值设置成保存的分类。
sessionStorage 的使用案例
场景 ：在一个多步骤的表单填写页面中，比如注册表单，每一步填写的数据可以临时存到 sessionStorage 里，方便用户在不同步骤之间切换时不会丢失数据，但是当用户关闭页面后，这些临时数据就会自动清除。
代码示例：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>sessionStorage 示例</title>
</head>
<body>
<form id="step1">
<label for="username">用户名：</label>
<input type="text" id="username">
<button onclick="saveStep1(); return false;">下一步</button>
</form>
<form id="step2" style="display: none;">
<label for="email">邮箱：</label>
<input type="email" id="email">
<button onclick="saveStep2(); return false;">提交</button>
</form>
<script>
// 保存第一步的数据到 sessionStorage
function saveStep1() {
var username = document.getElementById('username').value;
// 把用户名存到 sessionStorage 里，键名是 'username'
sessionStorage.setItem('username', username);
// 隐藏第一步表单，显示第二步表单
document.getElementById('step1').style.display = 'none';
document.getElementById('step2').style.display = 'block';
}
// 保存第二步的数据到 sessionStorage
function saveStep2() {
var email = document.getElementById('email').value;
// 把邮箱存到 sessionStorage 里，键名是 'email'
sessionStorage.setItem('email', email);
// 这里可以做提交表单的操作，比如发送到服务器
alert('注册信息已提交！用户名：' + sessionStorage.getItem('username') + '，邮箱：' + email);
}
</script>
</body>
</html>在这个例子里，用户在第一步填写用户名后，点击 "下一步" 按钮，用户名就会被存到 sessionStorage 里。然后页面切换到第二步，用户填写邮箱后点击 "提交" 按钮，邮箱也会被存到 sessionStorage 里。这样在整个注册流程中，数据不会丢失。但如果用户关闭了这个页面，存在 sessionStorage 里的用户名和邮箱就会自动清除。
localStorage和sessionStorage的存储容量分别是多少？
简单来说，localStorage和sessionStorage能存多少东西，没有一个特别死的规定，不同的浏览器不太一样哦。
一般来讲呢，localStorage就像你家里一个中等大小的储物箱，通常能放5MB到10MB的数据。打个比方，要是把数据想象成文件的话，大概能放好多页文字文档或者一些小图片之类的。像我们常用的Chrome浏览器，它的localStorage一般就是5MB的容量，不过有时候根据你用的设备不一样，或者你自己在浏览器里设置了一些特殊的东西，这个容量也可能会变。还有Firefox浏览器，它的localStorage容量通常也差不多是5MB。
sessionStorage呢，就好比是一个和localStorage差不多大的临时小箱子，它的容量一般也是5MB到10MB。比如说Safari浏览器，它的sessionStorage容量和localStorage差不多，大概也是5MB左右。
但你要知道哦，这些数字不是永远都不变的。浏览器的开发者们可能会根据技术的发展，或者是为了让用户用得更舒服，就去调整这些容量大小。而且呢，我们自己也可以在浏览器的设置里面，对这些存储容量做一些个性化的设置，让它更符合我们自己的需求。