Session Storage

Session storage is a concept in web development that is similar to local storage but with a key difference: data stored in session storage is only available for the duration of the page session. This means that once the tab or window is closed, the data is automatically deleted, making it ideal for temporary storage needs.

会话存储是在Web开发中的一个概念，与本地存储相似，但有一个关键的区别：存储在会话存储中的数据仅在页面会话期间可用。也就是说，一旦标签页或窗口关闭，数据将自动删除，这使得它非常适合临时存储需求。

Here’s how you can use session storage in JavaScript:

以下是如何在JavaScript中使用会话存储：

// Store data
sessionStorage.setItem('sessionData', 'Temporary Data');

// Retrieve data
const sessionData = sessionStorage.getItem('sessionData');

// Remove data
sessionStorage.removeItem('sessionData');

// Clear all data
sessionStorage.clear();

This code will store, retrieve, and remove a data item in the session storage, and clear all stored data:

这段代码将存储、检索和删除会话存储中的数据项，并清除所有存储的数据：

// Store data: Temporary Data
// Retrieve data: Temporary Data
// After remove: null
// After clear: null

Session storage can also be used with JSON to store complex data structures:

会话存储还可以与JSON一起使用以存储复杂的数据结构：

// Store an object
const sessionObj = { name: 'Session Example', active: true };
sessionStorage.setItem('sessionObj', JSON.stringify(sessionObj));

// Retrieve the object
const retrievedSessionObj = JSON.parse(sessionStorage.getItem('sessionObj'));

This code will output:

这段代码的输出将是：

// Stored object: {"name":"Session Example","active":true}
// Retrieved object: {name: "Session Example", active: true}

The comparison of session storage methods is shown in the table below:

会话存储方法的比较如下表所示：

Session storage is very useful for maintaining state during a single session, such as form inputs, temporary selections, or session-specific user settings.

会话存储在维护单个会话期间的状态时非常有用，例如表单输入、临时选择或会话特定的用户设置。

以下是关于会话存储的5个面试问题及其答案

1. What is session storage, and how is it different from local storage?

什么是会话存储，它与本地存储有何不同？

Session storage is similar to local storage but only persists data for the duration of the page session. Once the tab or window is closed, the data is deleted.

会话存储与本地存储类似，但仅在页面会话期间保留数据。一旦标签页或窗口关闭，数据就会被删除。

2. How do you store and retrieve data using session storage?

如何使用会话存储存储和检索数据？

sessionStorage.setItem('key', 'value');
const value = sessionStorage.getItem('key');

sessionStorage.setItem('key', 'value');
const value = sessionStorage.getItem('key');

3. What are the limitations of session storage?

会话存储有哪些限制？

Session storage has a size limit (usually around 5MB per domain), and it only stores data for the duration of a session.

会话存储有大小限制（通常每个域大约5MB），并且仅在会话期间存储数据。

4. Can you explain how to remove a specific item from session storage?

你能解释如何从会话存储中删除特定项吗？

sessionStorage.removeItem('key');

sessionStorage.removeItem('key');

5. How would you clear all data in session storage?

你如何清除会话存储中的所有数据？

sessionStorage.clear();

sessionStorage.clear();

Recommended Resources:

1. MDN Web Docs: Session Storage
2. W3Schools: Web Storage API