localStorage和sessionStorage以及两者区别

localStorage

localStorage 是一种客户端存储机制，在用户的浏览器中存储键值对形式的数据。

1.方法

1.存数据

localStorage.setItem("name", "lily");

2.取数据

const name=localStorage.getItem("name");
console.log(name)//lily

3更新数据

localStorage.setItem("name", "lily");

4.删除数据

localStorage.removeItem("username");

5.清空数据

localStorage.clear();

2.存储时的注意点

当localStorage存储对象数据时，需要使用 JSON.stringify() 方法将对象转为字符串存储，取的时候使用JSON.parse()方法将字符串转换为对象。

// 存储对象
var user = {
  name: "小明",
  age: 18,
};
 
localStorage.setItem("user", JSON.stringify(user));
 
// 获取对象
var storedUser = localStorage.getItem("user");
var parsedUser = JSON.parse(storedUser);
 
console.log(parsedUser.name); 
console.log(parsedUser.age); 
console.log(parsedUser.email);

sessionStorage

sessionStorage 的语法与localStorage的一致

二者区别

• 1.作用域不同
  • sessionStorage 的作用域限定在当前会话（当前浏览器标签页或窗口），而 localStorage 的作用域是永久的，数据在不同会话（遵循同源策略）之间共享。
• 2.生命周期不同
  • sessionStorage 的数据在会话结束时被清除，即当用户关闭浏览器标签页或窗口时，sessionStorage 中的数据会被删除。而 localStorage 的数据是持久化的，除非被显式清除，否则会一直保存在客户端。
• 3.存储容量不同
  • sessionStorage 的存储容量通常比 localStorage 小。一般来说，sessionStorage 的容量限制在 5MB 左右，而 localStorage 的容量限制通常在 5MB 到 10MB 之间，不同浏览器可能会有所不同。
• 4.数据共享不同
  • sessionStorage 的数据在同一个标签页或窗口中共享，不会跨标签页或窗口共享。而 localStorage 的数据在同一个域名下的所有标签页和窗口中共享。