前端|JavaScript 存储对象 -sessionStorage （会话存储）和 localStorage（本地存储）以及 cookie（保存用户信息）的区别

2022-03-11 前端 js javascript

sessionStorage （会话存储）和 localStorage（本地存储）以及 cookie（保存用户信息）的区别 localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
Cookie 用于存储 web 页面的用户信息。当浏览器从服务器上请求 web 页面时，属于该页面的 cookie 会被添加到该请求中。服务端通过这种方式来获取用户的信息。
localStorage（本地存储）用法语法：

window.localStorage

存储

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

读取

localStorage.getItem("key");

删除指定数据语法：

localStorage.removeItem("key");

清除存储对象中所有的键

localStorage.clear();

sessionStorage （会话存储）用法存储

sessionStorage.setItem("key", "value");

读取数据

sessionStorage.getItem("key");

删除指定键

sessionStorage.removeItem("key");

删除所有数据：

sessionStorage.clear();

Cookie用法：使用 JavaScript 创建Cookie：
创建

document.cookie="username=Jk";

可以为 cookie 添加一个过期时间（以 UTC 或 GMT 时间）。默认情况下，cookie 会在浏览器关闭时删除

document.cookie="username=Jk; expires=Thu, 18 Dec 2043 12:00:00 GMT";

使用 path 参数告诉浏览器 cookie 的路径。默认情况下，cookie 属于当前页面。

document.cookie="username=Jk; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

使用 JavaScript 读取 Cookie：

var x = document.cookie;

使用 JavaScript 修改 Cookie：旧的 cookie 将被覆盖。

document.cookie="username=Jk; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

使用 JavaScript 删除 Cookie:
删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可，如下所示，设置为 Thu, 01 Jan 1970 00:00:00 GMT:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

注意，当您删除时不必指定 cookie 的值。

【前端|JavaScript 存储对象 -sessionStorage （会话存储）和 localStorage（本地存储）以及 cookie（保存用户信息）的区别】

推荐阅读

上一篇：Web Storage 本地存储（Local Storage,Session Storage）和cookies（存储在用户本地终端上的数据）的区别浅说

下一篇：大数据|edge浏览器下载位置设置