cookie、localStorage、sessionStorage的区别

一、cookie、localStorage、sessionStorage区别：

三者的区别如下表：

二、localStorage、sessionStorage操作数据方法：

1.存储数据

        将数据以键值对的形式存储在浏览器中

sessionStorage.setItem( 'username' ,  'zhangsan' )
localStorage.setItem( 'password' ,  '123456')

2.获取数据

        通过指定键获取对应的值

var username = sessionStorage.getItem( 'username' ,  'zhangsan' )
var password = localStorage.getItem( 'password' ,  '123456' )

3.更新数据

        更新已存储的数据，仍需要通过键值对的方式设置新值

sessionStorage.setItem( 'username' ,  'lisi' )
localStorage.setItem( 'password' ,  '654321')

4.删除数据

        通过指定键来删除对应的数据

sessionStorage.removeItem( "username" )
localStorage.removeItem( "password" )

5.清空数据

        一次性删除 sessionStorage / localStorage 里面的数据

sessionStorage.clear()
localStorage.clear()

注意： 在 localStorage 中存储对象，需要将对象转换为字符串形式，因为 localStorage 只存储字符串数据。因此，先使用 JSON.stringfy() 方法将对象转化为 JSON 字符串，然后将其存储在 localStorage 中。使用存储对象时，使用 JSON.parse() 方法将字符串转化为原始的 JavaScrip 对象。

// 存储对象
var user = {
  username: "zhangsan",
  age: 18,
  password: "123456"
};
  
// 将 存储对象 转化为 JSON字符串
localStorage.setItem("user", JSON.stringify(user));
 
// 获取对象
var storedUser = localStorage.getItem("user");

// 将 JSON字符串 转化为 JavaScrip对象
var parsedUser = JSON.parse(storedUser);
 
console.log(parsedUser.username);     // 输出 "zhangsan"
console.log(parsedUser.age);         // 输出 18
console.log(parsedUser.password);       // 输出 "123456"

三、localStorage、sessionStorage区别：

1.作用域不同

sessionStorage：作用域限定于当前会话（当前浏览器标签页或窗口）

localStorage：作用域是永久的，数据在不同会话之间共享

2.生命周期不同

sessionStorage：数据在会话结束时被清除，即当用户关闭浏览器标签页或窗口时，sessionStorage中的数据会被删除。

localStorage：数据是持久化的，除非手动清除，否则会一直保存在客户端。

3.存储容量不同

sessionStorage：一般来说，容量限制在 5MB 左右。

localStorage：容量通常限制在 5MB 到 10MB 之间，具体根据浏览器而定。

注意：sessionStorage 的存储容量通常比 localStorage 小。

4.数据共享不同

sessionStorage：数据在同一个浏览器标签页或窗口中共享，但不会跨标签页或窗口共享。

localStorage：数据在同一个域名下的所有标签页和窗口中共享。

举例说明：

         浏览器打开了两个标签，访问相同的URL，在其中一个页面点击按钮清空sessionStorage ，不会对另外一个标签的 sessionStorage 有影响。

        在浏览器中，每个标签页都有自己独立的 'sessionStorage' 对象，它们之间是相互隔离的，用于存储会话级别的数据。若在一个标签中执行了清空 'sessionStorage' 操作，它只会清空当前标签页的 'sessionStorage'，不会对其他标签页的 'sessionStorage' 产生直接影响。

         浏览器打开了两个标签，访问相同的URL，在其中一个页面点击按钮清空 localStorage ，会对另外一个标签的 localStorage 有影响，因为 localStorage 遵循浏览器的同源策略。

        同源策略：是一种安全机制，用于限制不同源的网页之间的交互，以防止恶意网页访问其他网页的数据。在同源策略中，两个网页只有在协议、主机和端口都相同的情况下，两个网页才被认为是同源的。

         对于 'localStorage' 来说，它的同源策略是基于域名的。只有当两个具有相同的协议、主机和端口时，它们才能访问相同的 'localStorage' 数据。若网页的域名不同，即使在同一个浏览器中打开，它们也无法访问彼此的 'localStorage' 数据。

5.数据访问方式不同

sessionStorage：在会话期间存储临时的数据，且数据不需要在不同标签或窗口之间共享。

localStorage：永久性地存储数据，或者需要在不同标签页 / 窗口之间共享数据。