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

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 要求仍不清楚。因此，浏览器有可能随时更改它们处理文件的方式。一些浏览器处理它的方式已经演变。

本地存储有4种方法：

• setItem() 方法——这个方法有两个参数，一个是键，另一个是值。它用于将值与键的名称一起存储在特定位置。

  localStorage.setItem(key, value)

• 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(key, value)

• getIteam() 方法 –此方法采用一个参数，即 key，用于获取使用特定键名存储的值。

  sessionStorage.getItem(key)

• removeItem() 方法——该方法用于删除存储在内存中的值，以引用键。

  sessionStorage.removeItem(key)

• clear() 方法——此方法用于清除会话存储中存储的所有值

  sessionStorage.clear()

会话存储的图像

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

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

饼干的形象

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

Local Storage	Session Storage	Cookies
The storage capacity of local storage is 5MB/10MB	The storage capacity of session storage is 5MB	The storage capacity of Cookies is 4KB
As it is not session-based, it must be deleted via javascript or manually	It’s session-based and works per window or tab. This means that data is stored only for the duration of a session, i.e., until the browser (or tab) is closed	Cookies expire based on the setting and working per tab and window
The client  can only read local storage	The client can only read local storage	Both clients and servers can read and write the cookies
There is no transfer of data to the server	There is no transfer of data to the server	Data transfer to the server is exist
There are fewer old browsers that support it	There are fewer old browsers that support it	It is supported by all the browser including older browser