Html 本地存储、会话存储、会话和cookie之间有什么区别？

localStorage、sessionStorage、session和Cookie的技术优缺点是什么？我什么时候可以使用它们？

这是一个范围极广的问题，许多优缺点将与具体情况相关

在所有情况下，这些存储机制都特定于单个计算机/设备上的单个浏览器。跨会话持续存储数据的任何要求都需要涉及到应用程序服务器端——很可能使用数据库，但也可能使用XML或文本/CSV文件

localStorage、sessionStorage和Cookie都是客户端存储解决方案。会话数据保存在您直接控制的服务器上

本地存储和会话存储 localStorage和sessionStorage是相对较新的API（也就是说，并非所有传统浏览器都支持它们），它们几乎完全相同（在API和功能方面），唯一的例外是持久性。sessionStorage（顾名思义）仅在浏览器会话期间可用（并且在选项卡或窗口关闭时被删除）——但是，它在页面重新加载后仍然有效（源代码）

显然，如果您正在存储的数据需要持续可用，那么本地存储比会话存储更可取—不过您应该注意，这两种存储都可以由用户清除，因此在任何情况下都不应依赖数据的持续存在

localStorage和sessionStorage非常适合在页面之间持久化客户端脚本中所需的非敏感数据（例如：首选项、游戏中的分数）。localStorage和sessionStorage中存储的数据可以在客户端/浏览器中轻松读取或更改，因此不应依赖于在应用程序中存储敏感或安全相关数据

曲奇饼 Cookie也是如此，用户可以对其进行轻微的篡改，也可以从中以纯文本形式读取数据-因此，如果您想存储敏感数据，那么会话实际上是您唯一的选择。如果您不使用SSL，也可以在传输过程中截获cookie信息，特别是在开放式wifi上

从积极的一面看，Cookie可以通过设置HTTP only标志（这意味着现代（支持）浏览器将阻止访问来自JavaScript的Cookie和值（这也将阻止您自己的合法JavaScript访问它们），从而对跨站点脚本（XSS）/脚本注入等安全风险提供一定程度的保护. 这对于身份验证cookie尤其重要，身份验证cookie用于存储包含登录用户详细信息的令牌-如果您拥有该cookie的副本，那么就web应用程序而言，无论出于何种目的，您都将成为该用户，并且具有与用户相同的数据访问权限和功能

由于Cookie用于身份验证目的和用户数据的持久性，对一个页面有效的所有Cookie都会从浏览器发送到服务器，用于对同一域的每个请求，这包括原始页面请求、任何后续Ajax请求、所有图像、样式表、脚本和字体。因此，不应使用cookie存储大量信息。浏览器还可以对可存储在cookie中的信息的大小施加限制。通常，cookie用于存储身份验证、会话和广告跟踪的标识令牌。令牌本身通常不是人类可读的信息，而是链接到应用程序或数据库的加密标识符

本地存储与会话存储与Cookie 就功能而言，Cookie、sessionStorage和localStorage只允许您存储字符串-设置时可以隐式转换原语值（读取后需要转换回原语值以将其用作其类型），但不允许存储对象或数组（可以使用JSON序列化它们以使用API存储它们）。会话存储通常允许您存储服务器端语言/框架支持的任何原语或对象

客户端与服务器端 由于HTTP是一种无状态协议-web应用程序在返回网站时无法从以前的访问中识别用户-会话数据通常依赖cookie令牌来识别重复访问的用户（尽管很少使用URL参数）。数据通常会有一个滑动的到期时间（用户每次访问时都会更新），并且根据您的服务器/框架，数据将存储在进程中（这意味着如果web服务器崩溃或重新启动，数据将丢失），或者外部存储在状态服务器或数据库中。这在使用web场（给定网站有多台服务器）时也是必要的

由于会话数据完全由您的应用程序（服务器端）控制，因此它是处理任何敏感或安全性质的数据的最佳场所

服务器端数据的明显缺点是可伸缩性——在会话期间，每个用户都需要服务器资源，客户端所需的任何数据都必须随每个请求一起发送。由于服务器无法知道用户是否导航到另一个站点或关闭其浏览器，因此会话数据必须在给定时间后过期，以避免所有服务器资源被放弃的会话占用。因此，在使用会话数据时，您应该意识到数据可能已过期和丢失，尤其是在具有长表单的页面上。如果用户删除他们的cookie或切换浏览器/设备，它也将丢失

一些web框架/开发人员使用隐藏的HTML输入将数据从表单的一个页面持久化到另一个页面，以避免会话过期

localStorage、sessionStorage和Cookie都遵守“同源”规则，这意味着浏览器应该阻止访问

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

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

//Set the value in a local storage object
localStorage.setItem('name', myName);

//Get the value from storage object
localStorage.getItem('name');

//Delete the value from local storage object
localStorage.removeItem(name);//Delete specifice obeject from local storege
localStorage.clear();//Delete all from local storege

//set the value to a object in session storege
sessionStorage.myNameInSession = "Krishna";