介绍随着对前端的深入了解，了解了很多浏览器存储方案，比如Cookie、LocalStorage等，这些存储方案有哪些异同，有哪些特点适用场景？呢绒布。CookieCookie的来源Cookie的创建不是为了存储在本地，而是为了识别用户。众所周知，Http协议是无状态的，也就是说你向服务器发送的每一个请求都是与服务器隔离的，服务器并不知道这些请求来自于谁。例如，您将一些产品添加到购物车中，但服务器在发送结帐请求时出现混淆。我怎么知道你是谁，你买了什么。使用cookie后，服务器可以通过查看cookie来判断发送用户。在某种程度上，cookies可以说是请求的身份证。可以告诉服务器请求是由谁发送的。看到饼干是什么比听到它更好。让我们来看看cookie长什么样。这是百度主页上使用的cookie。可以看到，cookie是以Name-Value键值对的形式存储在浏览器中的，其中Value显然是加密后的数据。cookie的生成方法cookie是属于域名还是百度首页的cookie，通过Domain属性可以知道前两个cookie属于.baidu.com。每个域名只能在自己的域名下设置和访问cookies，如baidu.com不能访问domainsougou.com的cookies。但是子域名可以读取父域名设置的cookie。比如截图中的www.baidu.com读取的是Domain='.baidu.com'的cookie。通过手动设置Domain，可以设置父域名的cookie，比如www.baidu.com可以设置Domain='baidu.com'这样*.baidu.com的所有二级域名也可以读取它设置的cookies//www.baidu.comdocument.cookie='age=20;domain=.baidu。com'//此时所有二级域名都可以直接读取这个cookie。cookie的生成方式分为服务器端生成和浏览器端生成。服务器端——通过设置http响应头中的set-cookie，我们可以通过响应头中的Set-Cookie指定要存储的cookie值。当请求返回给浏览器时，浏览器会根据header中的set-cookie值设置cookie。默认情况下，Domain设置为cookie页面的主机名，当然我们也可以手动设置Domain的值。设置Cookie：id=a3fWa；Browser-js可以通过document.cookie读写cookies，以键值对形式显示document.cookie="id=a3fWa"document.cookie='age=20;domain=.baidu.com'应用场景Cookie的作用既然Cookie的作用是告诉服务器请求来自谁，那么最重要的作用就是保持用户登录状态（记住密码）。除此之外，它还可以记录用户的浏览数据，进行Advertisingpush和上面提到的购物车等等。cookie的缺点其实在上一篇文章中已经很明显了。它们不够大。Cookie将随每个请求一起发送。这意味着cookie必须有严格的大小限制。每个cookie的大小限制为4kb。值得注意的是4kb是指一个Name-Value的大小，并不是说这个域名可以设置的cookies总大小只有4kb。性能缺陷Cookies是跟在域名后面的，每次对同一个域名的请求都会发送，但实际上有很大一部分请求，比如请求图片等静态资源，根本就没有使用cookies。虽然每个cookie只有4kb，但是少量的堆积会造成巨大的资源浪费。我们可以把静态资源放在CDN上。这时候图片的域名和主站的域名不一样，发送cookies就不安全了。就像上面打开控制台可以直接看到cookie一样，cookie虽然是加密的，但是在Http传输中，是明文传输的，脚本也很容易获取到Cookie，非常容易被破解。在服务器端设置cookie时，附加HttpOnly标记，使浏览器无法使用document。发送了请求，但即便如此，也不应该使用cookie来存储敏感信息，因为cookie本质上是不安全的，这两个标签无法提供确切的安全性。解决方案既然cookies有这么多缺点，有没有一劳永逸的解决方案，那就是“专业的人做专业的事”。用户登录状态和部分用户信息存储的工作交给了Seesion---即Cookie只是用来存储唯一的用户标识，真正的信息存储在服务器端。使用Cookie作为SeesionID在服务器上查找信息。容量限制和安全问题都解决了，因为此时cookie中有一串无意义的随机码。本地存储的工作交给了HTML5中新的本地存储解决方案“WebStorage”，分为localStorage和SessionStorage两大类。接下来，我们就来介绍一下这两兄弟。LocalStorage特点数据会长期保存，直到被手动删除。大小约为5M。它与cookie相同。网站只能访问和操作自己网站域名下的数据。使用LocalStorage非常方便：//设置数据localStorage.setItem("key","value");//读取数据letvalueLocal=localStorage.getItem("key");通过以上特点，我们可以看出LocalStorage非常适合做本地缓存，可以提高首屏的加载速度。一些不经常变化的大资源，比如图片，也可以缓存起来，减少网络请求。SeesionStorage的特点是保存这个session的时间，也就是说窗口关闭的时候就没有了。只有本窗口可以访问，同源的其他窗口不能访问。信息。此信息仅适用于当前会话。比如可以用来持久化表单数据，防止刷新后表单数据丢失。Cookie、LocalStorage和SessionStorage的区别在于范围不同。这三者都是遵循协议的，即同一个协议，同一个数据只能在域名下的同一个端口下访问和修改。唯一的区别是SeesionStorage也需要相同的窗口。.PNG)生命周期中的不同cookie可以手动设置过期时间。默认为会话持续时间，窗口关闭时将被删除。当设置过期时间后，会一直保存在硬盘中，直到过期时间。LocalStorage是持久化的本地存储，除非你手动删除它，否则它会一直存在。SessionStorage是会话级存储，窗口关闭时也会被删除。综上所述，这是几种浏览器存储解决方案。当然，我们应该根据不同解决方案的特点来决定什么时候使用哪种解决方案。合适的才是最好的。总结本文的几个重点，cookie的主要工作不是本地存储，而是“保持状态”。WebStorage是HTML5专门为浏览器存储提供的一种数据存储机制。它不与服务器通信。参考文章Cookies的LifecycleIssues了解更多关于浏览器存储，说清楚cookies
