sessionStorage和localStorage区别

一、前言

`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 对象