JavaScript의 로컬 저장소, 세션 저장소 및 쿠키의 차이점

JavaScript는 클라이언트측에 데이터를 저장하기 위한 세 가지 메커니즘, 즉 쿠키, 세션 저장소 및 로컬 저장소를 제공합니다. 각 메커니즘에는 장점과 단점이 있습니다.

로컬 저장소는 최신 메커니즘입니다. 많은 양의 데이터를 저장할 수 있지만 브라우저를 닫아도 데이터가 삭제되지는 않습니다. 로컬 저장소는 오프라인 데이터와 같이 사용자가 나중에 액세스해야 하는 데이터를 저장하는 데 유용합니다.

세션 저장쿠키와 유사하지만 데이터는 현재 세션에 대해서만 저장됩니다. 즉, 사용자가 브라우저를 닫으면 데이터가 삭제됩니다. 세션 저장소는 로그인 자격 증명과 같은 민감한 데이터를 저장하는 데 유용합니다.

Cookie는 가장 오래되고 가장 유명한 메커니즘입니다. 사용이 간편하고 브라우저에서 잘 지원됩니다. 하지만 데이터 용량이 4KB로 제한되어 있어 사용자 선호도 등 민감하지 않은 데이터를 저장하는 데 자주 사용됩니다.

이 튜토리얼에서는 각각에 대해 자세히 다룰 것입니다.

로컬 저장소

요즘 대부분의 웹 애플리케이션에는 사용자 이름, 배송 주소 또는 기본 설정 등 특정 유형의 사용자 입력이 필요합니다. 그런 다음 해당 입력은 일반적으로 처리 및 저장을 위해 어딘가의 서버로 전송됩니다. 하지만 애플리케이션에서 데이터를 사용자 컴퓨터에 로컬로 저장해야 한다면 어떻게 될까요? 로컬 저장소가 들어오는 곳입니다.

로컬 저장소는 JavaScript가 브라우저에서 직접 데이터를 저장하고 액세스할 수 있도록 하는 웹 저장소 유형입니다. 이는 사용자가 브라우저를 닫더라도 기본 설정이나 설정 등 유지하려는 데이터를 저장하는 데 특히 유용합니다.

로컬 저장소의 데이터는 키/값 쌍으로 저장됩니다. 키는 데이터의 이름과 같고 값은 실제 데이터 자체와 같습니다. JavaScript에서는 변수라고 생각하시면 됩니다. 로컬 저장소에 데이터를 저장하려면 먼저 키를 만들어야 합니다. 그런 다음 해당 키 아래에 원하는 데이터를 저장할 수 있습니다.

키를 생성하려면 setItem() 메소드를 사용하세요. 이 메서드는 두 개의 매개 변수를 사용합니다. 첫 번째는 키이고 두 번째는 저장할 값입니다.

localStorage.setItem('key', 'value');

이제 키가 있으므로 해당 키 아래에 원하는 데이터를 저장할 수 있습니다. 저장하는 데이터는 문자열, 숫자, 객체, 배열 등 JavaScript가 지원하는 모든 데이터 유형이 될 수 있습니다.

데이터를 저장하려면 setItem() 메서드를 다시 사용하세요. 이번에는 첫 번째 매개변수로 키를 전달하고 두 번째 매개변수로 저장할 데이터를 전달합니다.

localStorage.setItem('key', 'value');

로컬 저장소에서 데이터를 검색하려면 getItem() 메서드를 사용하세요. 이 메서드는 키를 매개변수로 사용하고 해당 키에 저장된 데이터를 반환합니다.

localStorage.getItem('key');

로컬 저장소에서 항목을 제거하려면 removeItem() 메서드를 사용하세요. 이 메서드는 키를 매개변수로 사용하고 해당 키에 저장된 데이터를 삭제합니다.

localStorage.removeItem('key');

Session Storage

Session Storage는 웹 애플리케이션이 사용자의 브라우저에 로컬로 데이터를 저장할 수 있도록 하는 웹 저장소 유형입니다. 쿠키와 달리 세션 저장소에 저장된 데이터는 이를 생성한 사이트에만 적용되며, 해당 데이터는 다른 사이트와 공유되지 않습니다.

세션 저장소는 HTML5에 도입된 새로운 기능으로, 이를 통해 사용자 브라우저에 로컬로 데이터를 저장할 수 있습니다. 쿠키와 달리 세션 저장소에 저장된 데이터는 이를 생성한 사이트에만 적용되며, 해당 데이터는 다른 사이트와 공유되지 않습니다.

세션 저장소는 애플리케이션의 클라이언트 측에 데이터를 저장하는 방법입니다. 그것은 비슷하다 로컬 저장소, 그러나 몇 가지 중요한 차이점이 있음 -

• 세션 저장소 데이터는 해당 데이터를 생성한 사이트에서만 사용할 수 있습니다.

세션 저장 데이터는 다른 사이트와 공유되지 않습니다.

• 세션 저장 데이터는 영구적이지 않습니다. 즉, 사용자 세션 중에만 사용할 수 있습니다.

• 세션 저장 데이터는 이를 생성한 브라우저 탭에 따라 다릅니다.

세션 저장소는 클라이언트와 서버 간에 전송해야 하는 데이터 양을 줄여 웹 애플리케이션의 성능을 향상시킬 수 있는 좋은 방법입니다. 또한 데이터는 제3자 웹사이트에서 액세스할 수 있는 쿠키에 저장되지 않으므로 보다 안전한 방식으로 데이터를 저장하는 데 사용할 수 있습니다.

웹 애플리케이션에서 세션 저장소를 사용하려면 sessionStorage 개체를 사용해야 합니다. 이 개체는 현재 세션 저장소에 대한 액세스를 제공합니다.

sessionStorage 객체에는 두 가지 메소드가 있습니다.

setItem() - 이 메소드는 키/값 쌍 세션 저장소를 설정합니다.

sessionStorage.setItem("name", "tutorialsPoint");

getItem() - 이 메소드는 세션 저장소에서 키 값을 검색합니다.

var name = sessionStorage.getItem("name");

sessionStorage 객체에는 몇 가지 다른 속성이 있습니다. -

• length - 이 속성은 세션 저장소에 있는 키/값 쌍의 수를 반환합니다.

• key() - 이 메소드는 인덱스를 매개변수로 받아들이고 세션 저장소의 해당 인덱스에 있는 키를 반환합니다.

세션 저장소는 웹 애플리케이션 성능을 향상하고 데이터를 보다 안전하게 저장하는 데 좋습니다. 방법.

Cookie

Cookie 是存储在用户计算机上的一小段数据。 Cookie 用于存储有关用户的信息，例如用户的姓名、密码和偏好设置。

Cookie 是使用 document.cookie 属性创建的。此属性用于设置、获取和删除 Cookie。

设置 Cookie

使用 setItem() 方法设置 Cookie。该方法接受两个参数，cookie的名称和cookie的值。

cookie的名称用于标识cookie，值是要存储在cookie中的信息。 cookie。

以下代码设置一个名为“name”和值“tutorialsPoint”的 cookie。

document.cookie = "name=tutorialsPoint";

读取 Cookie

使用 getItem() 方法读取 Cookie。此方法接受 cookie 的名称作为参数并返回 cookie 的值。

如果 cookie 不存在，getItem() 方法将返回 null。

以下代码读取“name”cookie 并将值存储在“user”变量中。

var user = document.cookie.getItem("name");

与本地存储和会话存储相比，cookie 的一个优点是它们可以设置为在特定时间过期，这使得它们成为存储不应长期保留的数据（例如会话 ID）的不错选择。

本地存储、会话存储和 Cookie 之间的区别

下表突出显示了本地存储、会话存储和 Cookie 之间的主要区别 -

本地存储	会话存储	Cookie
允许存储10MB的数据。	允许存储5MB的数据。	存储容量限制为4KB数据。
关闭浏览器时不会删除存储的数据。	存储数据仅用于会话并会在浏览器关闭时被删除。	数据可以设置为在某个时间过期。
本地存储对于存储用户稍后需要访问的数据，例如离线数据。	会话存储是提高 Web 应用程序性能的好方法。	Cookie 是一个不错的选择用于存储不应该长时间保留的数据，例如会话 ID。
这对于存储即使用户关闭也希望保留的数据特别有用浏览器，例如首选项或设置。	会话存储对于存储敏感数据（例如登录凭据）非常有用。	Cookie 通常用于存储不敏感的数据，例如用户偏好
本地存储是HTML5中引入的新功能	会话存储是HTML5中引入的新功能HTML5	Cookie 是最古老的 (HTML4) 和最著名的机制。
数据是不随客户端请求发送到服务器。	数据不随客户端请求发送到服务器	数据随客户端请求发送到服务器
数据存储在浏览器和系统上。	数据仅存储在浏览器上。	数据仅存储在浏览器上。

结论

在本教程中，我们讨论了本地存储、会话存储之间的区别和饼干。我们已经看到了从该存储中存储和检索数据的不同方法。 本地存储是最新的机制。它允许存储更大量（10MB）的数据，但关闭浏览器时数据不会被删除。 会话存储与cookie类似，但仅存储当前会话的数据。这意味着当用户关闭浏览器时数据将被删除。 Cookie 是最古老、最著名的机制。它们使用简单并且受到浏览器的良好支持。但是，它们仅限于 4KB 的数据，并且通常用于存储不敏感的数据，例如用户首选项。

위 내용은 JavaScript의 로컬 저장소, 세션 저장소 및 쿠키의 차이점의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!