cookie、localStorage和sessionStorage都是客户端存储的手段,可以供服务器在客户端浏览器存储一些数据,但它们存在很多方面的区别。

cookie、localStorage、sessionStorage的区别

存储容量

localStorage和sessionStorage的容量一般在5MB或者更大。

cookie在不同浏览器的限制条数是不同的,但最大容量基本都是4KB。

有效期

localStorage的有效期是永久的,它会一直存在,直到被手动删除。

sessionStorage的有效期等同于存储它的顶级窗口的有效期,一旦该窗口被关闭,则sessionStorage就会被删除。

cookie默认的有效期等同于浏览器进程的有效期,与sessionStorage的单个窗口不同,但可以通过手动设置延长cookie的有效期。

作用域

localStorage的作用域为同源页面,同源的文档间共享同样的localStorage数据。

sessionStorage的作用域也是同源页面,但不止如此,它的作用域还被限制在顶级窗口中,即同源的文档渲染在不同的浏览器标签页中,则它们拥有的是各自的sessionStorage数据,无法共享。

cookie的作用域是通过文档源和文档路径来确定的,它对创建它的web页面以及该web页面同目录或子目录下的其它web页面可见。

比如web页面http://www.example.com/catalog/index.html创建了一个cookie,那么该cookie对http://www.example.com/catalog/order.html页面和http://www.example.com/catalog/widgets/index.html页面
都是可见的,但它对http://www.example.com/about.html页面不可见。

与服务器通信

cookie每次都会随http请求被发送到服务器,即使可能并不需要它。

localStorage和sessionStorage则不会被发送到服务器端。

易用性

cookie没有封装易用的API,使用起来比较麻烦。

localStorage和sessionStorage则有很方便的读取、设置、删除等API,操作起来非常方便。

应用场景

localStorage当数据需要持久化存储,然后在下次打开该页面时再次获取时。

sessionStorage在当前会话需要重复存取该数据,且会话结束后就不需要该数据时。

cookie通常用来和服务器端进行通信,比如可以配合服务器端的session完成用户身份验证等。