localStorage和sessionStorage的区别

localStorage和sessionStorage的区别

在日常的web开发中经常会遇到数据存储的问题，往往会用到这两个方法，这两个方法长得很像。接下来让我们看下localStorage和sessionStorage的使用方法和区别吧。

那么首先什么是LocalStorage和SessionStorage？

localStorage和sessionStorage是Web存储API的两种形式，它们允许网页在用户的浏览器上存储数据，但它们在作用域、生命周期和数据共享等方面有所不同。localStorage和sessionStorage的使用方法包括存储数据、获取数据和删除数据等操作。

localStorage和sessionStorage的使用方法

存储数据：使用setItem(key, value)方法存储数据。对于对象，需要先使用JSON.stringify()将对象转换为字符串形式。例如

localStorage.setItem("username", "张三");

获取数据：使用getItem(key)方法通过键名获取对应的值。如果获取的是对象，需要使用JSON.parse()将字符串解析回对象。例如

var username = localStorage.getItem("username");

更新数据：更新数据实际上就是存储新值覆盖旧值，直接使用setItem方法即可。例如

localStorage.setItem("username", "李四");

删除数据：使用removeItem(key)方法删除特定的数据项。例如

localStorage.removeItem("username");

清空数据：使用clear()方法清空存储区域中的所有数据。例如

localStorage.clear();

避雷

当需要在 localStorage 中存储对象时，需要先将对象转换为字符串形式，因为 localStorage 只能存储字符串数据。很坑吧！！！
你可以使用 JSON.stringify() 方法将对象转换为 JSON 字符串，然后将其存储在 localStorage 中。当你需要使用存储的对象时，可以使用 JSON.parse() 方法将 JSON 字符串转换回原始的 JavaScript 对象。虽然很难坑但还是有解决方法的。
接下来是一段示例代码。

// 创建一个对象
const myObject = {
  name: 'John',
  age: 30,
  city: 'New York'
};

// 将对象转换为 JSON 字符串并存储到 localStorage
localStorage.setItem('myObject', JSON.stringify(myObject));

// 从 localStorage 获取 JSON 字符串并将其转换回对象
const retrievedObject = JSON.parse(localStorage.getItem('myObject'));

console.log(retrievedObject); // 输出：{ name: 'John', age: 30, city: 'New York' }

localStorage和sessionStorage的区别

作用域：localStorage的作用域是永久的，数据在不同会话之间共享。即使关闭并重新打开浏览器，数据依然存在。而sessionStorage的作用域限定在当前会话，即当前浏览器标签页或窗口。当会话结束（如关闭标签页或浏览器时），数据会被删除。

生命周期：localStorage中的数据是持久化的，不会因为浏览器的关闭而被清除。相反，sessionStorage的数据在会话结束时就会被清除。这使得localStorage更适合长期存储数据，而sessionStorage适合临时存储数据。

存储容量：通常来说，这两者的存储容量都在5MB左右，但具体的容量限制因浏览器而异。一般来说，localStorage的容量限制比sessionStorage稍大一些。

数据共享：localStorage的数据在同一个域名下的所有标签页和窗口中共享，而sessionStorage的数据仅在当前标签页或窗口中有效，其他标签页或窗口无法访问到这些数据

接下来我们通过表格直观对比一下

特性	LocalStorage	SessionStorage
作用域	永久，数据在不同会话之间共享	限定在当前会话，即当前浏览器标签页或窗口
生命周期	数据持久保存，直到被显式清除	数据在会话结束时被清除
存储容量	约5MB到10MB	约5MB
数据共享	同一域名下的所有标签页和窗口中共享	仅在当前标签页或窗口中有效
使用方法	用 setItem 方法存储，getItem 获取	同LocalStorage，但仅限于当前会话

简单来说 想要永久存储切换页面不丢失数据的选LocalStorage。
临时使用单页面使用选SessionStorage。