软件下载网址,seo网络贸易网站推广,前端开发面试题,wordpress 代码分享本文经授权转自公众号CSDN(ID#xff1a;CSDNnews)作者 | 浪里行舟责编 | 郭芮随着移动网络的发展与演化#xff0c;我们手机上现在除了有原生 App#xff0c;还能跑“WebApp”——它即开即用#xff0c;用完即走。一个优秀的 WebApp 甚至可以拥有和原生 App 媲美的功能和体…本文经授权转自公众号CSDN(IDCSDNnews)作者 | 浪里行舟责编 | 郭芮随着移动网络的发展与演化我们手机上现在除了有原生 App还能跑“WebApp”——它即开即用用完即走。一个优秀的 WebApp 甚至可以拥有和原生 App 媲美的功能和体验。WebApp 优异的性能表现有一部分原因要归功于浏览器存储技术的提升。cookie存储数据的功能已经很难满足开发所需逐渐被WebStorage、IndexedDB所取代本文将介绍这几种存储方式的差异和优缺点。Cookie1、Cookie的来源Cookie 的本职工作并非本地存储而是“维持状态”。因为HTTP协议是无状态的HTTP协议自身不对请求和响应之间的通信状态进行保存通俗来说服务器不知道用户上一次做了什么这严重阻碍了交互式Web应用程序的实现。在典型的网上购物场景中用户浏览了几个页面买了一盒饼干和两瓶饮料。最后结帐时由于HTTP的无状态性不通过额外的手段服务器并不知道用户到底买了什么于是就诞生了Cookie。它就是用来绕开HTTP的无状态性的“额外手段”之一。服务器可以设置或读取Cookies中包含信息借此维护用户跟服务器会话中的状态。我们可以把Cookie 理解为一个存储在浏览器里的一个小小的文本文件它附着在 HTTP 请求上在浏览器和服务器之间“飞来飞去”。它可以携带用户信息当服务器检查 Cookie 的时候便可以获取到客户端的状态。在刚才的购物场景中当用户选购了第一项商品服务器在向用户发送网页的同时还发送了一段Cookie记录着那项商品的信息。当用户访问另一个页面浏览器会把Cookie发送给服务器于是服务器知道他之前选购了什么。用户继续选购饮料服务器就在原来那段Cookie里追加新的商品信息。结帐时服务器读取发送来的Cookie就行了。2、什么是Cookie及应用场景Cookie指某些网站为了辨别用户身份而储存在用户本地终端上的数据(通常经过加密)。 cookie是服务端生成客户端进行维护和存储。通过cookie,可以让服务器知道请求是来源哪个客户端就可以进行客户端状态的维护比如登陆后刷新请求头就会携带登陆时response header中的set-cookie,Web服务器接到请求时也能读出cookie的值根据cookie值的内容就可以判断和恢复一些用户的信息状态。如上图所示Cookie 以键值对的形式存在。典型的应用场景有记住密码下次自动登录购物车功能记录用户浏览数据进行商品(广告)推荐。3、Cookie的原理及生成方式Cookie的原理第一次访问网站的时候浏览器发出请求服务器响应请求后会在响应头里面添加一个Set-Cookie选项将cookie放入到响应请求中在浏览器第二次发请求的时候会通过Cookie请求头部将Cookie信息发送给服务器服务端会辨别用户身份另外Cookie的过期时间、域、路径、有效期、适用站点都可以根据需要来指定。Cookie的生成方式主要有两种生成方式一http response header中的set-cookie我们可以通过响应头里的 Set-Cookie 指定要存储的 Cookie 值。默认情况下domain 被设置为设置 Cookie 页面的主机名我们也可以手动设置 domain 的值。Set-Cookie: ida3fWa; ExpiresWed, 21 Oct 2018 07:28:00 GMT;//可以指定一个特定的过期时间(Expires)或有效期(Max-Age)当Cookie的过期时间被设定时设定的日期和时间只与客户端相关而不是服务端。生成方式二js中可以通过document.cookie可以读写cookie以键值对的形式展示例如我们在掘金社区控制台输入以下三句代码便可以在Chrome 的 Application 面板查看生成的cookiedocument.cookieuserNamehellodocument.cookiegendermaledocument.cookieage20;domain.baidu.com从上图中我们可以得出Domain 标识指定了哪些域名可以接受Cookie。如果没有设置domain就会自动绑定到执行语句的当前域。 如果设置为”.baidu.com”,则所有以”baidu.com”结尾的域名都可以访问该Cookie所以在掘金社区上读取不到第三条代码存储Cookie值。4、Cookie的缺陷Cookie 不够大Cookie的大小限制在4KB左右对于复杂的存储需求来说是不够用的。当 Cookie 超过 4KB 时它将面临被裁切的命运。这样看来Cookie 只能用来存取少量的信息。此外很多浏览器对一个站点的cookie个数也是有限制的。这里需注意各浏览器的cookie每一个namevalue的value值大概在4k所以4k并不是一个域名下所有的cookie共享的,而是一个name的大小。过多的 Cookie 会带来巨大的性能浪费Cookie 是紧跟域名的。同一个域名下的所有请求都会携带 Cookie。大家试想如果我们此刻仅仅是请求一张图片或者一个 CSS 文件我们也要携带一个 Cookie 跑来跑去(关键是 Cookie 里存储的信息并不需要)这是一件多么劳民伤财的事情。Cookie 虽然小请求却可以有很多随着请求的叠加这样的不必要的 Cookie 带来的开销将是无法想象的。cookie是用来维护用户信息的而域名(domain)下所有请求都会携带cookie但对于静态文件的请求携带cookie信息根本没有用此时可以通过cdn(存储静态文件的)的域名和主站的域名分开来解决。 - 由于在HTTP请求中的Cookie是明文传递的所以安全性成问题除非用HTTPS。5、Cookie与安全HttpOnly 不支持读写浏览器不允许脚本操作document.cookie去更改cookie 所以为避免跨域脚本 (XSS) 攻击通过JavaScript的 Document.cookie API无法访问带有 HttpOnly 标记的Cookie它们只应该发送给服务端。如果包含服务端 Session 信息的 Cookie 不想被客户端 JavaScript 脚本调用那么就应该为其设置 HttpOnly 标记。Set-Cookie: ida3fWa; ExpiresWed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly标记为 Secure 的Cookie只应通过被HTTPS协议加密过的请求发送给服务端。但即便设置了 Secure 标记敏感信息也不应该通过Cookie传输因为Cookie有其固有的不安全性Secure 标记也无法提供确实的安全保障。为了弥补 Cookie 的局限性让“专业的人做专业的事情”Web Storage 出现了。HTML5中新增了本地存储的解决方案——Web Storage它分成两类sessionStorage和localStorage。这样有了WebStorage后cookie能只做它应该做的事情了——作为客户端与服务器交互的通道保持客户端状态。2LocalStorage1、LocalStorage的特点保存的数据长期存在下一次访问该网站的时候网页可以直接读取以前保存的数据大小为5M左右仅在客户端使用不和服务端进行通信接口封装较好。基于上面的特点LocalStorage可以作为浏览器本地缓存方案用来提升网页首屏渲染速度(根据第一请求返回时将一些不变信息直接存储在本地)。2、存入/读取数据localStorage保存的数据以“键值对”的形式存在。也就是说每一项数据都有一个键名和对应的值。所有的数据都是以文本格式保存。 存入数据使用setItem方法。它接受两个参数第一个是键名第二个是保存的数据。 localStorage.setItem(key
