localStorage、sessionStorage 和 cookie 之间的区别

心已赠人 2022-12-21 02:29 109阅读 0赞

### 数据存储机制 ###

*  localStorage
 *   *  什么是localStorage
     *  localStorage的特点
 *  sessionStorage
 *   *  什么是sessionStorage
     *  sessionStorage的特点
 *  cookie
 *   *  什么是cookie
     *  cookie的特点
     *  三者之间的区别

# localStorage #

## 什么是localStorage ##

在HTML5中，新加入了一个`localStorage`特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。

## localStorage的特点 ##

优点：

*  localStorage拓展了cookie的4K限制；
 *  localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的；

缺点：

*  浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性；
 *  目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换；
 *  localStorage在浏览器的隐私模式下面是不可读取的；
 *  localStorage本质上是对**字符串的读取**，如果存储内容多的话会消耗内存空间，会导致页面变卡；
 *  localStorage不能被爬虫抓取到。

# sessionStorage #

## 什么是sessionStorage ##

`sessionStorage`是HTML5新增的一个会话存储对象，用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。在JavaScript语言中可通过 `window.sessionStorage`或 `sessionStorage`调用此对象。

## sessionStorage的特点 ##

1.  同源策略限制。若想在不同页面之间对同一个sessionStorage进行操作，这些页面必须在同一协议、同一主机名和同一端口下。(IE 8和9存储数据仅基于同一主机名，忽略协议（HTTP和HTTPS）和端口号的要求)
2.  单标签页限制。sessionStorage操作限制在单个标签页中，在此标签页进行同源页面访问都可以共享sessionStorage数据。
3.  只在本地存储。seesionStorage的数据不会跟随HTTP请求一起发送到服务器，只会在本地生效，并在关闭标签页后清除数据。(若使用Chrome的恢复标签页功能，seesionStorage的数据也会恢复)。
4.  存储方式。seesionStorage的存储方式采用key、value的方式。value的值必须为字符串类型(传入非字符串，也会在存储时转换为字符串。true值会转换为"true")。
5.  存储上限限制：不同的浏览器存储的上限也不一样，但大多数浏览器把上限限制在5MB以下。

# cookie #

## 什么是cookie ##

`cookie`，有时也用其复数形式 cookies。类型为“小型文本文件”，是某些网站为了辨别用户身份，进行Session跟踪而储存在用户本地终端上的数据（通常经过加密），由用户客户端计算机暂时或永久保存的信息。cookie就是以Key，Value的形式存储在浏览器端的数据。

## cookie的特点 ##

存储特点：

*  存储大小受限，跟浏览器版本有关
 *  存储条数受限，跟浏览器版本有关
 *  字符编码为Unicode，不支持直接存储中文
 *  存储内容可以被轻松查看，不建议存储敏感信息
 *  可靠性差，可能随时都会因为各种原因被删除
 *  存储属性除了Name、Value、过期时间，还有Domian、Path，当前域可以操作当前域子域、父域名的Cookie，当前Path，可以操作当前Path以及当前Path子、父Path下的Cookie。

传输特点：

*  每次Request客户端符合domian以及path要求的Cookie都会通过Request Headers传输到服务器端
 *  传输的Cookie大小会受到浏览器以及Web服务器的限制

安全特点：

*  Cookie中的信息很容易被查看，建议加密后存储
 *  Cookie容易被XSS攻击利用，可以设置HttpOnly=true，不允许客户端访问（99.9%的浏览器有效）

功能特点：

*  会话状态管理（如用户登录状态、购物车、游戏分数和其它需要记录的信息）
 *  个性化设置（如用户自定义设置、主题等）
 *  浏览器行为跟踪（如跟踪分析用户行为）

## 三者之间的区别 ##

**共同点**：都是保存在浏览器端、且同源的  
区别：

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