一、前言
`sessionStorage 和 localStorage 都是 Web 浏览器提供的用于在客户端存储数据的 API,它们之间的主要区别在于数据的生命周期和作用域。
二、生命周期
sessionStorage:数据仅在当前会话期间有效。当用户关闭浏览器标签页或窗口时,数据将被清除。
一般情况:将临时的,需要请求并且暂存的数据json或对象数组存入sessionStorage
举例音乐网站:音乐id、用户身份头像、属性等。不作于长期存储。
localStorage:数据长期有效,即使用户关闭浏览器标签页或窗口,数据也不会被清除,除非主动删除或通过代码进行清除。
音乐网站:播放历史、用户足迹等。
当然,session和local开发人员都能执行自主销毁。定时销毁。
三、作用域
sessionStorage:数据仅在同一浏览器标签页或窗口中共享。如果在不同标签页或窗口中打开同一个网站,每个标签页或窗口都会有自己独立的 sessionStorage。
重点强调跳转和新开
<!-- 跳转示例 -->
<a href="newpage.html">点击跳转到新页面</a>
session会延用
<a href="newpage.html" target="_blank">在新标签页打开新页面</a>
session会另起炉灶
localStorage:数据在同一域名下的所有标签页或窗口中共享。如果在不同标签页或窗口中打开同一个网站,它们可以访问相同的 localStorage 数据。
重点强调 localStorage一般用于 游客,第二个游客访问也能沿袭第一个游客的访问数据。
四、容量限制
sessionStorage 和 localStorage 的容量限制因浏览器而异,但通常情况下 localStorage 的容量限制要大于 sessionStorage(存字符串建议存英文)。
五、案例
sessionStorage 和 localStorage 使用相似的 API 进行数据存储和检索。你可以使用 setItem() 方法将数据存储到 sessionStorage 或 localStorage 中,使用 getItem() 方法获取存储的数据,以及使用 removeItem() 方法删除指定的数据。
这里给出 sessionStorage 的存取过程,以便更好地理解它的工作原理:
向 sessionStorage 存储数据:
javascript
// 使用 setItem() 方法将数据存储到 sessionStorage 中
sessionStorage.setItem('key', 'value');
在这个例子中,我们使用 setItem() 方法将一个名为 key 的键和一个值为 value 的值存储到 sessionStorage 中。如果该键已经存在,它将覆盖之前的值。
从 sessionStorage 获取数据:
javascript
// 使用 getItem() 方法从 sessionStorage 中获取数据
const value = sessionStorage.getItem('key');
console.log(value); // 输出结果为 "value"
这个例子中,我们使用 getItem() 方法根据键从 sessionStorage 中获取存储的数据。在本例中,我们从 sessionStorage 中获取 key 键的值,即 value。
更新 sessionStorage 中的数据:
javascript
// 使用 setItem() 方法更新 sessionStorage 中存储的数据
sessionStorage.setItem('key', 'new value');
这个例子中,我们再次使用 setItem() 方法更新 sessionStorage 中存储的 key 键对应的值。新值为 new value。
从 sessionStorage 中删除数据:
javascript
// 使用 removeItem() 方法从 sessionStorage 中删除数据
sessionStorage.removeItem('key');
在这个例子中,我们使用 removeItem() 方法从 sessionStorage 中删除名为 key 的键及其对应的值。如果该键不存在,这个方法将不做任何事情。
需要注意的是,所有存储在 sessionStorage 中的数据都是字符串类型。如果你存储的是一个对象或数组等非字符串类型的数据,需要使用 JSON.stringify() 方法将其转换成字符串,然后再使用 JSON.parse() 方法将其还原成原始数据类型。
var musicList = [
{
idPromise: '',
fileName: '2otEhB6er/test/test11.mp3',
songName: '当你老了',
artistName: '李健',
coverImage: '2otEhB6er/test/test11.jpg'
},
{
idPromise: '',
fileName: '2otEhB6er/test/test22.mp3',
songName: '月半小夜曲',
artistName: '李克勤',
coverImage: '2otEhB6er/test/test22.jpg'
},
{
idPromise: '',
fileName: '2otEhB6er/test/test33.mp3',
songName: '老街',
artistName: '李荣浩',
coverImage: '2otEhB6er/test/test33.jpg'
}
];
// 将 musicList 转换为 JSON 格式的字符串
var musicListString = JSON.stringify(musicList);
// 将 musicList 存入 localStorage
localStorage.setItem('musicList', musicListString);
// 从 localStorage 中获取存储的 musicList 字符串
var storedMusicListString = localStorage.getItem('musicList');
// 将存储的 musicList 字符串解析为 JavaScript 对象
var storedMusicList = JSON.parse(storedMusicListString);
// 现在 storedMusicList 变量中存储了之前存入 localStorage 的 musicList 对象