cookie、sessionStorage和localStorage 区别

77 阅读3分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第14天,点击查看活动详情

1.cookie****

概念:Cookie 是一些数据, 存储于你电脑上的文本文件中。

当 web 服务器向浏览器发送 web 页面时,在连接关闭后,服务端不会记录用户的信息。

Cookie 的作用就是用于解决 "如何记录客户端的用户信息":

当用户访问 web 页面时,他的名字可以记录在 cookie 中。

在用户下一次访问该页面时,可以在 cookie 中读取用户访问记录。

Cookie 以名/值对形式存储,如:username=John Doe 

当浏览器从服务器上请求 web 页面时, 属于该页面的 cookie 会被添加到该请求中。服务端通过这种方式来获取用户的信息。

语法:JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookie。

创建 cookie: document.cookie="username=John Doe";

您还可以为 cookie 添加一个过期时间(以 UTC 或 GMT 时间)。默认情况下,cookie 在浏览器关闭时删除:

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

读取 cookie: var x = document.cookie;

修改 cookie: document.cookie="username=John Smith; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

旧的 cookie 将被覆盖。

删除 cookie,只需要设置 expires 参数为以前的时间即可,不必指定 cookie 的值: document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

例子: 在以下实例中,我们将创建 cookie 来存储访问者名称。

image.png

getCookie函数为返回指定 cookie 的值;setCookie函数用于存储访问者的名字;checkCookie函数用于检测 cookie 是否创建。

也称之为“会话跟踪技术”,就是在一次会话中跟踪记录一些状态。“会话”指的就是从浏览器打开一个网址到访问它的其他网页直到浏览器关闭这整个过程,cookie可以在一次会话的开始到结束全程记录客户端的状态,例如:客户端的用户信息、是否登录、购物车信息等。

Cookie 曾一度用于客户端数据的存储,因当时并没有其它合适的存储办法而作为唯一的存储手段,但现在随着现代浏览器开始支持各种各样的存储方式,Cookie 渐渐被淘汰。由于服务器指定 Cookie 后,浏览器的每次请求都会携带 Cookie 数据,会带来额外的性能开销(尤其是在移动环境下)。新的浏览器 API 已经允许开发者直接将数据存储到本地,如使用 sessionStorage、localStorage 。

1. localStorage

概念:localStorage 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去删除。

localStorage 属性是只读的。

语法:

保存数据: localStorage.setItem("key", "value");

读取数据: var lastname = localStorage.getItem("key");

删除数据: localStorage.removeItem("key");

实例: 以下实例用于记录点击按钮的次数:

image.png

1.sessionStorage****

概念:将数据保存在当前会话中, 该数据对象临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。

语法:

保存数据: sessionStorage.setItem("key", "value");

读取数据: var lastname = sessionStorage.getItem("key");

删除指定键的数据: sessionStorage.removeItem("key");

删除所有数据: sessionStorage.clear();

例子: 以下实例用于记录点击按钮的次数:

image.png

1.三者的区别****

image.png