本地存储(LocalStorage)、会话存储(Session)和 Cookie 三者之间的区别

30 篇文章 1 订阅
14 篇文章 1 订阅

HTTP 协议是服务端和客户端之间顺畅通信最重要的协议之一。HTTP协议的主要缺点是无状态协议,这意味着它不跟踪服务器和客户端的任何响应和请求信息,因此为了解决这个问题,有三种方法可以跟踪有用信息在本文中,我们将了解本地存储、会话存储和 Cookie 之间的区别,以及为什么 Web 开发人员了解这些术语很重要。 

Local Storage:这个只读接口属性提供了对 Document 的本地存储对象的访问,存储的数据跨浏览器会话存储。与 sessionStorage 类似,不同之处在于 localStorage 数据在页面会话结束时被清除——即页面关闭时。当浏览器的最后一个“私人”选项卡关闭时(在私人浏览或隐身会话中加载的文档的本地存储数据),它会被清除。

DOMStrings 是使用 UTF-16 编码数据的存储格式,每个字符使用两个字节。字符串是从整数键自动生成的,就像它们用于对象一样。存储在 LocalStorage 中的数据特定于文档中的协议。如果站点通过 HTTP(例如 http://example.com)加载,localStorage 返回的对象与通过 HTTPS(例如 https://abc.com)加载的对象不同。

如果从文件加载文档:URL(即直接从用户的本地文件系统而不是从服务器加载),则行为要求是未定义的,并且可能因不同的浏览器而异。在所有当前浏览器中,localStorage 似乎为每个文件返回了一个不同的对象:URL。从本质上讲,每个 URL 似乎都是一种情况:文件具有自己唯一的本地存储区域。

无法保证此行为,因为如上所述,file: URL 要求仍不清楚。因此,浏览器有可能随时更改它们处理文件的方式。一些浏览器处理它的方式已经演变。

本地存储(LocalStorage)有4种方法:

  • setItem() 方法——这个方法有两个参数,一个是键,另一个是值。它用于将值与键的名称一起存储在特定位置。
    localStorage.setItem(键,值)
  • getItem() 方法 –此方法采用一个参数,即 key,用于获取使用特定键名存储的值。
    localStorage.getItem(key)
  • removeItem() 方法——该方法用于删除存储在内存中的值,以引用键。
    localStorage.removeItem(key)
  • clear() 方法 -此方法用于清除本地存储中存储的所有值。
    localStorage.clear()

本地存储面板的图像

什么是会话存储?

可以使用 sessionStorage 只读属性访问会话存储对象。sessionStorage 和 localStorage 的区别在于 localStorage 数据不会过期,而 sessionStorage 数据会在页面会话结束时被清除。

一旦文档加载到浏览器选项卡中,就会创建一个唯一的页面会话。页面会话一次仅对一个选项卡有效。页面仅在选项卡或浏览器打开的时间内保存;在页面重新加载和恢复后,它们不会持续存在。每次打开选项卡或窗口时都会创建一个新会话;这与会话 cookie 不同。使用相同 URL 打开的每个选项卡/窗口都会创建自己的 sessionStorage。复制选项卡时,原始选项卡中的 sessionStorage 会复制到复制的选项卡。关闭窗口/选项卡会结束会话并清除 sessionStorage 对象。

页面的协议决定了 sessionStorage 中存储的数据。特别是,通过 HTTP 访问的脚本(例如 http://abc.com)存储的数据存储在与通过 HTTPS 访问的同一站点(例如 https://abc.com)不同的对象中。一个 DOMString 数字是 UTF-16 DOMString 格式的每个字符两个字节。字符串是从整数键自动生成的,就像它们用于对象一样。

Session Storage 有 4 种方法:

  • setItem() 方法——这个方法有两个参数,一个是键,另一个是值。它用于将值与键的名称一起存储在特定位置。
    sessionStorage.setItem(键,值)
  • getIteam() 方法 –此方法采用一个参数,即 key,用于获取使用特定键名存储的值。
    sessionStorage.getItem(key)
  • removeItem() 方法——该方法用于删除存储在内存中的值,以引用键。
    sessionStorage.removeItem(key)
  • clear() 方法——该方法用于清除存储在会话存储中的所有值
    sessionStorage.clear()

会话存储的图像

Cookie:术语“cookie”仅指有关网站的文本信息。为了识别您并根据您的喜好向您显示结果,当您访问特定网站时,本网站会在您的本地系统中保存一些信息。互联网的历史长期以来一直以使用 cookie 为标志。网站访问者在访问网页时向服务器询问网页。对服务器的每个请求都是唯一的。同样,如果您访问一百次,服务器将认为每个请求都是唯一的。由于服务器每秒接收许多请求,因此将每个用户的信息存储在服务器上似乎并不合乎逻辑和显而易见。如果您不返回,则可能不再需要相同的信息。因此,会发送一个 cookie 并将其存储在您的本地计算机上,以唯一标识您。下次您点击它时,您将收到来自同一服务器的响应,因为它会识别您。几乎每个服务器都使用此 cookie(由于广告,今天存在一些例外)。因此,尽管您的系统中可能有许多 cookie,但这些 cookie 将被服务器识别并分析。

最初开发 cookie 时,它​​们被用来改善开发人员的体验。考虑使用您的母语以外的语言(比如说英语)访问网站。您可以从网站的语言部分选择英语作为您的语言。如果您访问同一个网站五次,则可能需要每天切换五次语言。因此,这些详细信息存储在您系统上的 cookie 中。这可确保服务器知道您希望在您下次发送请求时查看英文网站。Cookie 在这方面至关重要。今天使用的比例饼干比上面的例子小得多。

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
localStoragesessionStorage、cookiesession是用于在Web应用程序中存储数据的不同方法,它们之间有一些区别。 1. localStoragelocalStorageHTML5引入的一种本地存储方式,可以将数据存储在浏览器中,以供后续会话使用。存储localStorage中的数据在浏览器关闭后仍然保留,下次访问页面时可以继续使用。localStorage具有较大的存储容量限制。 2. sessionStorage:sessionStorage也是HTML5引入的一种本地存储方式,与localStorage相似,但存储sessionStorage中的数据只在当前会话期间有效。当用户关闭浏览器标签页或浏览器时,sessionStorage中的数据将被清除。sessionStorage也有较大的存储容量限制。 3. cookiecookie是一种在Web浏览器中存储数据的小文件。与localStoragesessionStorage不同,cookie将数据存储在客户端和服务器之间进行交互。每次发送HTTP请求时,浏览器都会自动将cookie发送给服务器。cookie具有较小的存储容量限制,并且可以设置过期时间。 4. sessionsession是一种在服务器端存储会话数据的机制。每当用户通过浏览器访问服务器上的Web应用程序时,服务器都会为该用户创建一个唯一的会话ID,并将会话数据存储在服务器上。与localStoragesessionStorage和cookie不同,session数据不存储在客户端,而是存储在服务器端,并且在用户关闭浏览器后仍然保留。 总结:localStoragesessionStorage用于在浏览器中存储数据,而cookiesession用于在客户端和服务器之间存储数据。localStoragesessionStorage具有较大的存储容量限制,而cookie具有较小的存储容量限制。session数据存储在服务器上,而localStoragesessionStorage和cookie数据存储在客户端。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Meta.Qing

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值