js前端存储之sessionStorage使用方法举例

1.使用场景

   sessionStorage 是 Web Storage API 提供的一种客户端存储机制，用于在浏览器中保存会话级别（session-level）的数据。与 localStorage 不同，sessionStorage 中存储的数据在用户关闭标签页或浏览器窗口时会被清除。

2.使用方法

使用 sessionStorage 对象来存储键值对数据，并在当前会话期间访问这些数据。以下是一些常见的 sessionStorage 方法：

• sessionStorage.setItem(key, value): 将键值对数据存储到会话存储中。
• sessionStorage.getItem(key): 获取指定键对应的值。
• sessionStorage.removeItem(key): 从会话存储中移除指定键及其对应的值。
• sessionStorage.clear(): 清空会话存储中的所有数据。

3.示例 

// 将数据存储到会话存储中
sessionStorage.setItem('username', 'johnDoe');

// 从会话存储中获取特定键对应的值
const username = sessionStorage.getItem('username');
console.log(username); // 输出 'johnDoe'

// 从会话存储中移除指定键及其对应的值
sessionStorage.removeItem('username');

// 清空会话存储中的所有数据
sessionStorage.clear();

需要注意的是，sessionStorage 中存储的数据仅在当前会话期间有效。如果用户关闭标签页或浏览器窗口，这些数据将被清除。

sessionStorage.setItem与sessionStorage.getItem

sessionStorage.getItem 是 Web Storage API 中的一种方法，用于从会话存储中获取特定键对应的值。会话存储（session storage）是浏览器提供的一种存储机制，可以在当前会话期间（即在同一个标签页或窗口打开的情况下）保存数据。

// 将数据存储到会话存储中
sessionStorage.setItem('username', 'johnDoe');

// 从会话存储中获取特定键对应的值
const username = sessionStorage.getItem('username');
console.log(username); // 输出 'johnDoe'

使用 sessionStorage.setItem 方法将键为 'username' 的值设置为 'johnDoe'。然后使用 sessionStorage.getItem 方法来获取键为 'username' 的值，并将其赋给变量 username。

附：js中session、cookie、 localStorage和SessionStorage的区别和特点

1. 生命周期：

   - Session：session 存储在服务器端，通常使用会话标识符（session ID）来识别用户会话。session 数据随着会话的结束而销毁，或者在一段时间的不活动后过期。

   - Cookie：cookie 存储在客户端，可以设置存储时间。可以通过设置过期时间来控制 cookie 的生命周期。

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

   - sessionStorage：sessionStorage 数据仅在当前会话期间有效，关闭浏览器标签页或窗口后会被销毁。

2. 存储容量：

   - Session 和 cookie：一般情况下，服务器可以设置 session 存储容量的大小，cookie 的存储容量受浏览器限制，一般为 4KB 左右。

   - localStorage 和 sessionStorage：它们有更大的存储容量，一般为 5MB 左右。

3. 数据发送：

   - Session：session 数据存储在服务器上，每次请求时都会将 session ID 发送到服务器。服务器根据 session ID 来获取对应的 session 数据。

   - Cookie：cookie 数据会在每次 HTTP 请求时自动发送到服务器，可以通过设置 domain 和 path 控制 cookie 在哪些请求中发送。

   - localStorage 和 sessionStorage：数据仅在客户端存储，不会自动发送到服务器。

4. 访问权限：

   - Session、cookie、localStorage 和 sessionStorage 都是在浏览器中存储的，因此可以通过 JavaScript 在客户端访问和操作这些存储机制。

总体来说，session 适用于需要在服务器端存储用户相关数据的情况，而 cookie 适用于需要在客户端存储少量简单数据的情况。localStorage 和 sessionStorage 则适用于需要在客户端持久化存储大量数据的情况，但它们仅在客户端存储，不涉及与服务器的数据交互。根据具体的需求和场景，选择合适的存储机制。

到此这篇关于js前端存储之sessionStorage使用方法的文章就介绍到这了,更多相关js前端存储sessionStorage使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论