LocalStorage:

Web storage can be viewed simplistically as an improvement on cookies, providing much greater storage capacity. Available size is 5MB which considerably more space to work with than a typical 4KB cookie. The data is not sent back to the server for every HTTP request (HTML, images, JavaScript, CSS, etc) - reducing the amount of traffic between client and server. The data stored in localStorage persists until explicitly deleted. Changes made are saved and available for all current and future visits to the site. It works on same-origin policy. So, data stored will only be available on the same origin.

饼干：

我们可以为每个cookie设置过期时间 4K的限制适用于整个cookie，包括名称、值、有效期等。为了支持大多数浏览器，请将名称保持在4000字节以下，并且cookie的总体大小保持在4093字节以下。 对于每个HTTP请求(HTML、图像、JavaScript、CSS等)，数据都被发送回服务器，这增加了客户端和服务器之间的流量。

sessionStorage:

It is similar to localStorage. Changes are only available per window (or tab in browsers like Chrome and Firefox). Changes made are saved and available for the current page, as well as future visits to the site on the same window. Once the window is closed, the storage is deleted The data is available only inside the window/tab in which it was set. The data is not persistent i.e. it will be lost once the window/tab is closed. Like localStorage, it works on same-origin policy. So, data stored will only be available on the same origin.

这里是一个快速的回顾和简单而快速的理解

来自freecodecamp的Beau Carnes教练

localStorage

存储在localStorage中的数据没有过期日期，只能通过JavaScript或清除浏览器缓存/本地存储的数据来清除。 存储限制是三者中最大的。 存储在localStorage中的数据将一直存在，直到显式删除为止。所做的更改将被保存，并可用于当前和将来对站点的所有访问。 它在同源策略上工作。因此，存储的数据只能在相同的原点上可用。

sessionStorage

它仅为会话存储数据，这意味着数据将一直存储到浏览器(或选项卡)关闭为止。 数据从不传输到服务器。 更改仅适用于每个窗口(或Chrome和Firefox等浏览器中的选项卡)。所做的更改将被保存，并可用于当前页面，以及在同一窗口上对该网站的未来访问。一旦窗口关闭，存储就会被删除。

LocalStorage Pros: Web storage can be viewed simplistically as an improvement on cookies, providing much greater storage capacity. If you look at the Mozilla source code we can see that 5120KB (5MB which equals 2.5 Million chars on Chrome) is the default storage size for an entire domain. This gives you considerably more space to work with than a typical 4KB cookie. The data is not sent back to the server for every HTTP request (HTML, images, JavaScript, CSS, etc) - reducing the amount of traffic between client and server. The data stored in localStorage persists until explicitly deleted. Changes made are saved and available for all current and future visits to the site. Cons: It works on same-origin policy. So, data stored will only be available on the same origin. Cookies Pros: Compared to others, there's nothing AFAIK. Cons: The 4K limit is for the entire cookie, including name, value, expiry date etc. To support most browsers, keep the name under 4000 bytes, and the overall cookie size under 4093 bytes. The data is sent back to the server for every HTTP request (HTML, images, JavaScript, CSS, etc) - increasing the amount of traffic between client and server. Typically, the following are allowed: 300 cookies in total 4096 bytes per cookie 20 cookies per domain 81920 bytes per domain(Given 20 cookies of max size 4096 = 81920 bytes.) sessionStorage Pros: It is similar to localStorage. The data is not persistent i.e. data is only available per window (or tab in browsers like Chrome and Firefox). Data is only available during the page session. Changes made are saved and available for the current page, as well as future visits to the site on the same tab/window. Once the tab/window is closed, the data is deleted. Cons: The data is available only inside the window/tab in which it was set. Like localStorage, it works on same-origin policy. So, data stored will only be available on the same origin.

跨标签签出-如何促进跨来源浏览器标签之间的简单通信。

这些是JavaScript中“window”对象的属性，就像document是window对象的属性之一，它包含DOM对象。

Session Storage属性为每个给定的源维护一个单独的存储区域，在页面会话期间可用，即只要浏览器打开，包括页面重新加载和恢复。

本地存储做同样的事情，但即使浏览器关闭并重新打开也会持续存在。

您可以通过以下方式设置和检索已存储数据:

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

var data = sessionStorage.getItem('key');

localStorage也是如此。

确切的用例-

如果您希望页面始终保存一些非机密的数据，那么可以使用localStorage。 如果服务器需要知道一些信息，比如身份验证密钥，您应该使用cookie来存储它们。 sessionStorage可用于存储界面的状态，即，无论何时访问一个页面，定制它，访问另一个页面并返回到同一页面，您都希望显示用户如何定制该页面。这是sessionStorage的一个很好的用例。