localStorage与sessionStorage的使用和区别

川长思鸟来 2021-12-07 10:19 288阅读 0赞

# [localStorage与sessionStorage的使用和区别][localStorage_sessionStorage] #

*  ### 基本概念 ###
 *  ### 示例 ###
 *  ### 浏览器兼容性 ###
 *  ### 总结 ###

--------------------

Web Storage API 提供了存储机制，通过该机制，浏览器可以安全地存储键值对，比使用 cookie 更加直观。这篇文章一步一步讲解如何使用这项简单的技术。

## 基本概念 ##

Web Storage 包含如下两种机制：

*  `sessionStorage` 为每一个给定的源（given origin）维持一个独立的存储区域，该存储区域在页面会话期间可用（即只要浏览器处于打开状态，包括页面重新加载和恢复）。
 *  `localStorage` 同样的功能，但是在浏览器关闭，然后重新打开后数据仍然存在。

这两种机制是通过 [`Window.sessionStorage`][Window.sessionStorage] 和 [`Window.localStorage`][Window.localStorage] 属性使用（更确切的说，在支持的浏览器中 `Window` 对象实现了 `WindowLocalStorage`和 `WindowSessionStorage` 对象并挂在其 `localStorage` 和 `sessionStorage` 属性下）—— 调用其中任一对象会创建 [`Storage`][Storage] 对象，通过 [`Storage`][Storage] 对象，可以设置、获取和移除数据项。对于每个源（origin）`sessionStorage` 和 `localStorage` 使用不同的 Storage 对象——独立运行和控制。

例如，在文档中调用 `localStorage` 将会返回一个 [`Storage`][Storage] 对象；调用 `sessionStorage` 返回一个不同的 [`Storage`][Storage] 对象。可以使用相同的方式操作这些对象，但是操作是独立的。

## 示例 ##

只读的`localStorage` 属性允许你访问一个[`Document`][Document] 源（origin）的对象 [`Storage`][Storage]；其存储的数据能在跨浏览器会话保留。`localStorage` 类似 [`sessionStorage`][Window.sessionStorage]，但其区别在于：存储在 `localStorage` 的数据可以长期保留；而当页面会话结束——也就是说，当页面被关闭时，存储在 `sessionStorage` 的数据会被清除 。

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

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

**存值：**

下面的代码片段访问了当前域名下的本地 [`Storage`][Storage] 对象，并通过 [`Storage.setItem()`][Storage.setItem] 增加了一个数据项目。

localStorage.setItem('myCat', 'Tom');

**取值：**

该语法用于读取 `localStorage` 项，即获取Key为myCat的值。如下:

let cat = localStorage.getItem('myCat');

**删除值：**

该语法用于移除 `localStorage` 项，即删除Key为myCat的值。如下:

localStorage.removeItem('myCat');

该语法用于移除所有的 `localStorage` 项，如下:

// 移除所有
    localStorage.clear();

## 浏览器兼容性 ##

![20190716175705805.png][]

![20190716175730347.png][]

**备注：**各浏览器支持的 localStorage 和 sessionStorage 容量上限不同。测试页面 [detailed rundown of all the storage capacities for various browsers][]。

PS：从ios 5.1后，Safari移动存储本地存储的数据在缓存文件夹，这样在系统空间不足的情况下，方便系统自动清理。

## 总结 ##

1、localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。  
2、localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。  
3、localStorage 属性是只读的。

**提示：**如果你只想将数据保存在当前会话中，可以使用 sessionStorage 属性， 改数据对象临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

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

**localStorage 的局限**

1、浏览器的大小不统一，并且在 IE8 以上的 IE 版本才支持 localStorage 这个属性。  
 2、目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换。  
 3、localStorage在浏览器的隐私模式下面是不可读取的。  
 4、localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡。  
 5、localStorage不能被爬虫抓取到。  
localStorage 与 sessionStorage 的唯一一点区别就是 localStorage 属于永久性存储，而 sessionStorage 属于当会话结束的时候，sessionStorage 中的键值对会被清空。

参考文档：[Web Storage API][]

[localStorage_sessionStorage]: https://blog.csdn.net/weixin_44299027/article/details/96160204
[Window.sessionStorage]: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/sessionStorage
[Window.localStorage]: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage
[Storage]: https://developer.mozilla.org/zh-CN/docs/Web/API/Storage
[Document]: https://developer.mozilla.org/zh-CN/docs/Web/API/Document
[Storage.setItem]: https://developer.mozilla.org/zh-CN/docs/Web/API/Storage/setItem
[20190716175705805.png]: /images/20211207/d2b9f4a5a4cd427996d1a45b8e0a5321.png
[20190716175730347.png]: /images/20211207/025eae7f05604780b7bb4ba204747eed.png
[detailed rundown of all the storage capacities for various browsers]: http://dev-test.nemikor.com/web-storage/support-test/
[Web Storage API]: https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API