localStorage、sessionStorage 、cookie

Love The Way You Lie 2021-11-16 22:26 354阅读 0赞

问题1：

请描述cookies、sessionStorage和localStorage的区别？

问题2：

有用过本地存储吗？有什么限制？有没有考虑过超出了限制怎么办？

## 1.localStorage本地存储和sessionStorage会话存储 ##

localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。

只读的`localStorage`属性 可以访问一个document的对象 Storage，它存储的数据能在跨浏览器会话保留。

`localStorage` 类似 `sessionStorage`，但其区别在于：存储在 `localStorage` 的数据可以长期保留，即`localStorage` 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。而当页面会话结束——也就是说，当页面被关闭时，存储在 `sessionStorage` 的数据会被清除 。

`sessionStorage` 属性允许你访问一个 session `Storage` 对象,用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

`sessionStorage`与 `localStorage` 相似，不同之处在于 `localStorage` 里面存储的数据没有过期时间设置，而存储在 `sessionStorage` 里面的数据在页面会话结束时会被清除。**页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话**。在新标签或窗口打开一个页面时会在顶级浏览上下文中初始化一个新的会话，这点和 session cookies 的运行方式不同。

【注意】

1.无论数据存储在 `localStorage` 还是 `sessionStorage` ，它们都**特定于页面的协议**。

2.`localStorage` 中的键值对总是以字符串的形式存储。 (需要注意, 和js对象相比, 键值对总是以字符串的形式存储意味着数值类型会自动转化为字符串类型)

localStorage 与sessionStorage：

<table> 
 <thead> 
  <tr> 
   <th></th> 
   <th>localStorage</th> 
   <th>sessionStorage</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>语法</td> 
   <td>myStorage = localStorage;</td> 
   <td>myStorage =sessionStorage</td> 
  </tr> 
  <tr> 
   <td>值</td> 
   <td>一个可被用于访问当前源（ origin ）的本地存储空间的 Storage 对象。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>保存数据语法</td> 
   <td>localStorage.setItem(“key”, “value”);</td> 
   <td>sessionStorage.setItem(“key”, “value”);</td> 
  </tr> 
  <tr> 
   <td>读取数据语法</td> 
   <td>var lastname = localStorage.getItem(“key”);</td> 
   <td>var lastname = sessionStorage.getItem(“key”);</td> 
  </tr> 
  <tr> 
   <td>删除数据语法</td> 
   <td>localStorage.removeItem(“key”);</td> 
   <td>sessionStorage.removeItem(“key”); (删除指定数据的key)。sessionStorage.clear();(删除所有数据)</td> 
  </tr> 
  <tr> 
   <td>返回值:</td> 
   <td>一个存储对象</td> 
   <td>一个 Storage 对象。</td> 
  </tr> 
 </tbody> 
</table>

localStorage 的优势

1、localStorage 拓展了 cookie 的 4K 限制。

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

## 2.cookie ##

Cookie 是一些数据, 存储于你电脑上的文本文件中。

当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。

Cookie 的作用就是**用于解决 “如何记录客户端的用户信息”。** 但是大小只有4k的限制。

当用户访问 web 页面时，他的名字可以记录在 cookie 中。

在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。

## 3.存储容量限制 ##

浏览器对于存储数据的大小有限制，限制的大小一般在5M/域，超出则会报Uncaught QuotaExceededError。

因此在开发时应注意控制存储数据保持在限制大小内，并定时清除无用的数据。若要手动删除数据，Chrome浏览器可至chrome://settings/cookies 查看不同网站已使用本地存储的占用空间情况，并进行删除操作。