cookie session webStorage 区别总结笔记

cookie

什么是 cookie

cookie是指某些网站为了辨别用户身份而存储在用户本地终端（client side）上的数据（通常经过加密）。cookie通过HTTP请求报文和响应报文配合完成。
cookie是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求同一个页面时，就会发送这个 cookie 。
通俗的说就是当一个用户通过HTTP协议访问一个服务器的时候，这个服务器会将一些key/Value键值对返回给客户端浏览器，并给这些数据加上一些限制条件，在条件符合时这个用户下次访问这个服务器的时候，数据又被完整的带回给服务器。
cookie是浏览器提供的一种机制，可以由 javascript 对其进行控制，而不是 javascript 本身的性质。

HTTP 无状态

HTTP协议是无状态的协议。一旦数据交换完毕，客户端与服务器的连接就会关闭，再次交换数据需要建立新的连接。这就意味着服务器无法从连接上跟踪会话。
而cookie机制采用的是在客户端保持状态的方案，而session机制采用的是在服务器端保持状态的方案。

cookie 的不可跨域名性

cookie是存于用户硬盘的一个文件，这个文件通常对应于一个域名。cookie可以跨越同一个域名下的多个网页，但不能跨越多个域名使用。

cookie 的使用场景

1. 购物车
   没有登录之前商品数据是保存在cookie中
2. 记住用户名
   利用cookie保存用户名
3. 记住窝
   利用cookie来保存用户名和密码（加密后保存的）

cookie 的缺点

1. cookie体积过大会造成请求和响应速度变慢。
2. 默认浏览器会任何请求都把cookie带上去，哪怕是静态资源。
3. cookie可以在前后端修改，数据容易篡改或伪造。
4. cookie对于敏感数据的保护基本是无效的。
5. 有些用户是禁用掉cookie的

session

除了cookie，web应用程序中还经常使用session来记录客户端的登录状态。不同于cookie，session保存在服务器上。session相当于程序在服务器上建立一份客户档案，客户来访时只需要查询客户档案表就可以了。

webStorage

webStorage是HTML5中本地存储的解决方案之一，在 html5 中的 WebStorage 概念引入并不是为取代 cookie 而制定的标准，cookie 作为HTTP协议的一部分用来处理客户端和服务器通信是不可或缺的， session正是依赖于实现的客户端状态保持。
webStorage的意图在于解决本地本来不应该用 cookie 做，却不得不用cookie的本地存储。

webStorage 的优势

1. 从容量上讲WebStorage一般浏览器提供5M的存储空间。
2. 安全性上WebStorage 并不作为 HTTP header 发送的浏览器，所以相对安全。
3. 从流量上讲，因为WebStorage不传送到服务器，所以不必要的流量可以节省。

Html 5的Web Storage分两种，一个是sessionStorage，另一个是localStorage，两者差別就差在生命周期的不同而已。
sessionStorage 用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此 sessionStorage 不是一种长久化的本地存储，仅仅是会话级别的存储。
而localStorage则正好相反，除非主动删除数据，否则数据是永远不会过期的。

cookie和session的区别

1. session 保存在服务器，客户端不知道其中的信息；cookie 保存在客户端，服务器能够知道其中的信息。
2. session 中保存的是对象，cookie 中保存的是字符串。
3. session 不能区分路径，同一个用户在访问一个网站期间，所有的session在任何地方都可以访问到。而 cookie 中如果设置了路径参数，那么同一个网站不同路径下的 cookie 互相是不可以访问的。
4. cookie 不是很安全，本人可以分析存放在本地的 COOKIE 并进行 COOKIE欺骗
5. session 会在一定时间内保存在服务器上。当访问增多，会占用你服务器的性能。考虑到减轻服务器性能方面，应该使用 COOKIE。
6. 单个 cookie 保存的数据不能超过 4k ，很多浏览器都限制一个站点最多保存 20 个 cookie。
7. session 是通过 cookie来工作的。

cookie 和　sessionStorage 、localStorage之间的区别

1. 共同点：都是保存在浏览器端，且同源的。
2. 区别：
   • cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
   • cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。
   • 存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
   • 数据有效期不同，
     sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；
     localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；
     cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
   • 作用域不同，
     sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；
     localStorage 在所有同源窗口中都是共享的；
     cookie也是在所有同源窗口中都是共享的。
   • Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。
   • Web Storage 的 api 接口使用更方便。

sessionStorage与页面 js 数据对象的区别

页面中一般的 js 对象或数据的生存期是仅在当前页面有效，因此刷新页面或转到另一页面这样的重新加载页面的情况，数据就不存在了。
而 sessionStorage 只要同源的同窗口（或tab）中，刷新页面或进入同源的不同页面，数据始终存在。也就是说只要这个浏览器窗口没有关闭，加载新页面或重新加载，数据仍然存在。

参考自：

请描述一下 cookies，sessionStorage 和 localStorage 的区别？