sessionStorage和localStorage 的区别和使用,具体与 session 区分

sessionStorage和localStorage是浏览器提供的Web Storage机制,用于存储在客户端(浏览器)本地的数据。它们之间的区别主要体现在以下几个方面:

1. 数据作用域:
- sessionStorage:存储在sessionStorage中的数据仅在当前会话期间有效,即在浏览器同一个窗口或标签页打开的时间范围内。关闭窗口或标签页后,sessionStorage中存储的数据会被清除。
- localStorage:存储在localStorage中的数据是持久化的,即使关闭窗口或重启电脑,数据仍然存在。

2. 数据共享:
- sessionStorage和localStorage的数据都是存储在客户端本地,不会自动发送给服务器。因此,它们不能直接与服务器进行数据共享。
- Session则是服务器端的会话管理机制,通过在浏览器请求中携带SessionID进行数据访问和共享。它允许在不同的请求、页面之间共享会话数据。

3. 数据大小:
- sessionStorage和localStorage的存储容量通常比Cookie大得多,可以达到5MB左右的容量限制,不同的浏览器有一些差异不同
- Cookie的存储容量较小,一般只有4KB左右。

使用sessionStorage示例:

// 存储数据到sessionStorage
sessionStorage.setItem('key', 'value');

// 从sessionStorage中获取数据
var value = sessionStorage.getItem('key');
console.log(value);

// 删除sessionStorage中的数据
sessionStorage.removeItem('key');

// 清空sessionStorage中的所有数据
sessionStorage.clear();

使用localStorage示例:

// 存储数据到localStorage
localStorage.setItem('key', 'value');

// 从localStorage中获取数据
var value = localStorage.getItem('key');
console.log(value);

// 删除localStorage中的数据
localStorage.removeItem('key');

// 清空localStorage中的所有数据
localStorage.clear();

你可能感兴趣的:(js,前端)