聊聊web存储(cookie、localStorage、sessionStorage)

  • cindy Liu
  • 3 Minutes
  • September 30, 2018

cookie原理

第一次访问网站的时候,浏览器发出请求,服务器响应请求后,会将 cookie 放入到响应请求中,在浏览器第二次发请求的时候,会把 cookie 带过去,服务端会辨别用户身份,当然服务器也可以修改 cookie 内容(后面会谈到这点)。cookie 的产生是通过扩展 HTTP 协议来实现的,服务器通过在 HTTP 响应头中加上一行特殊的指示以提示浏览器按照指示生成相应的 cookie。然而纯粹的客户端脚本如 JavaScript 也可以生成 cookie。而 cookie 的使用是由浏览器按照一定的原则在后台自动发送给服务器的。浏览器检查所有存储的 cookie ,如果某个 cookie 所声明的作用范围(这个作用范围由 cookie 的 path 和 domain 同时决定)大于等于将要请求的资源所在的位置,则把该 cookie 附在请求资源的 HTTP 请求头上发送给服务器。

cookie不可跨域名性

HttpOnly

这个属性是面试的时候常考的,如果这个属性设置为 true,就不能通过 JavaScript 脚本来获取 cookie 的值,能有效的防止xss 攻击,看 MDN 的官方文档:
为避免跨域脚本 (XSS) 攻击,通过JavaScript的 Document.cookie API无法访问有HttpOnly 标记的Cookie,Cookie只需要发送给服务端。如果包含服务端session信息的Cookie不想被客户端Javascript使用,那么就需要使用HttpOnly 标记

#####cookie与session
HTTP是一个不保存状态的协议,所谓不保存状态,就是一个服务器并不清楚是不是同一个浏览器在访问他。 现实方案具体来说 cookie 机制采用的是在客户端保持状态的方案,而 session 机制采用的是在服务器端保持状态的方案。
cookie session 区别
cookie 数据存放在客户的浏览器上,session数据放在服务器上
cookie 不是很安全,别人可以分析存放在本地的 COOKIE 并进行 COOKIE 欺骗考虑到安全应当使用 session
session 会在一定时间内保存在服务器上。当访问增多,会比较占用你服务器的性能考虑到减轻服务器性能方面,应当使用 COOKIE
单个 cookie 保存的数据不能超过 4K,很多浏览器都限制一个站点最多保存20个 cookie。
鉴于上述区别我们建议
将登陆信息等重要信息存放为 SESSION
其他信息如果需要保留,可以放在 COOKIE 中

cookie知识点

每个Cookie的大小一般不超过4KB
浏览器每次向服务器发起请求,就会自动附上这段信息
获取当前网页的cookie: document.cookie
每个浏览器对cookie的大小和数量限制不一样。
浏览器的同源政策规定:两个网址,只要域名、端口相同(无需协议相同),就可以共享cookie
服务器通过Set-cookie 响应头设置Cookie

localStorage和sessionStorage

两者的共同点在于:
1、存储大小均为5M左右
2、都有同源策略限制
3、仅在客户端中保存,不参与和服务器的通信
两者的不同点在于:
1、生命周期 —— 数据可以存储多少时间
localStorage: 存储的数据是永久性的,除非用户人为删除否则会一直存在。
sessionStorage: 与存储数据的脚本所在的标签页的有效期是相同的。一旦窗口或者标签页被关闭,那么所有通过 sessionStorage 存储的数据也会被删除。
2、作用域 —— 谁拥有数据的访问权
localStorage: 在同一个浏览器内,同源文档之间共享 localStorage 数据,可以互相读取、覆盖。
sessionStorage: 与 localStorage 一样需要同一浏览器同源文档这一条件。不仅如此,sessionStorage 的作用域还被限定在了窗口中,也就是说,只有同一浏览器、同一窗口的同源文档才能共享数据。
为了更好的理解sessionStorage,我们来看个例子:
例如你在浏览器中打开了两个相同地址的页面A、B,虽然这两个页面的源完全相同,但是他们还是不能共享数据,因为他们是不同窗口中的。但是如果是一个窗口中,有两个同源的iframe元素的话,这两个iframe的 sessionStorage 是可以互通的。

localStorage,sessionStorage和cookie的区别

共同点:都是保存在浏览器端、且同源的
不同点:
数据存储方面
cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递。cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下
sessionStorage和localStorage不会自动把数据发送给服务器,仅在本地保存。
存储数据大小
存储大小限制也不同,cookie数据不能超过4K,同时因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据,如会话标识。
sessionStorage和localStorage虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大
数据存储有效期
sessionStorage:仅在当前浏览器窗口关闭之前有效;
localStorage:始终有效,窗口或浏览器关闭也一直保存,本地存储,因此用作持久数据;
cookie:只在设置的cookie过期时间之前有效,即使窗口关闭或浏览器关闭
作用域不同
sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;
localstorage在所有同源窗口中都是共享的;也就是说只要浏览器不关闭,数据仍然存在
cookie: 也是在所有同源窗口中都是共享的.也就是说只要浏览器不关闭,数据仍然存在