学习了前端才知道SessionStorage和localStorage是怎样存储数据的

太过爱你忘了你带给我的痛 2023-06-30 09:24 14阅读 0赞

# 前言 #

之前一直好奇我们在进浏览器的时候会一些数据会留下记录，当我们好像浏览器有记忆功能，很懵，不知道什么原理，当我们进这个页面对页面新完数据还在，感觉很神奇，最近通过实践终于有了自己的理解，与君共勉，大佬勿喷。

假如作为一个前端人员的话，就必须对一些主流的浏览器以及他各自的兼容性有一定的了解，更要知道浏览器的特性，知道浏览器怎样存储数据，怎样释放数据。这里通过**localStorage**和**sessionStorage****谈谈。**

# 一、首先我们需要知道SessionStorage和**localStorage**是什么？ #

# 1.英文意思 #

**SessionStorage：会话存储**

**localStorage：本地存储**

## 2.官方解释 ##

作为html5中Web Storage的一种存储方式，**localStorage**和**sessionStorage**一样都是用来存储客户端临时信息的对象。至于html5是什么大家都知道，我就不做介绍了。

# 二、**localStorage**和**sessionStorage** #

## 1.本质 ##

*  **其实他们两个的本质是一样的，都是用来存储数据，其区别就在于存储的时候有各自的存储方法，生命周期，以及大小和存储内容类型。**
 *  **sessionStorage有期限，当窗口或浏览器关闭时就会被销毁。localStorage无限期，关闭浏览器后仍存在，除非用户手动在浏览器UI层删除**
 *  **localStorage 在同源的不同窗口下可共享，在不同浏览器中不可共享**
 *  **sessionStorage 在同源的不同窗口下不可共享。注意这里的不同窗口是指浏览器另起一窗口，并不是指页面路由跳转**

## 2.作用 ##

我们知道cookie的存储控件只有4k，所以在浏览器中存储数据的空间是非常有限的。**而SessionStorage和localStorage解决了cookie存储空间不足的问题**(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。

## 3.对比 ##

### ①.SessionStorage ###

**优点：**

*  sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
 *  sessionStorage 在当前浏览器页面时有效的，如果这个窗口不管，我们存储的数据会一直存储，知道浏览器的关闭这个会话的生命周期也随之结束。
 *  sessionStorage当打开当前页面再进入其他页面，回来刷新的时候数据内容依然存在，不会丢失。

### **②localStorage** ###

**优点：**

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

**局限**

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

## 4.存储方式： ##

localStorage与sessionStorage都存储在浏览器端，而不与服务器交互。

## 5.存储大小： ##

①localStorage的大小一般为5M

②sessionStorage的大小一般为5M

## 6.存储内容类型： ##

localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse

## 7.用法 ##

①（发送页）将一个页面的的值作为参数传到另一个界面

![20200116204701278.png][]

②（接受页）本页面将上个页面传过来的值存储在sessionStorage中

![20200116204718244.png][]

## 8.结果 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5cDAzMDREZXZpbg_size_16_color_FFFFFF_t_70][]

这样就做到了刷新页面数据依然还在，解决了出现空白页的问题。

除了这些还有cookid和session，具体详情查看以下博客。

[https://blog.csdn.net/yyp0304Devin/article/details/103206608][https_blog.csdn.net_yyp0304Devin_article_details_103206608]

# 三、应用 #

局部存储器。它是html5新增的一个本地存储API，所谓localStorage就是一个小仓库的意思，它有5M的大小空间，存储在浏览器中，我们可以通过js来操纵localStorage。

localStorage作为HTML5本地存储web storage特性的API之一，主要作用是将数据保存在客户端中，而客户端一般是指上海网站设计用户的计算机。在移动设备上，由于大部分浏览器都支持web storage特性，因此在android和ios等[智能手机][Link 1]上的[web浏览器][web]都能正常使用该特性。

localStorage保存的数据，一般情况下是永久保存的，也就是说只要采用localstorage保存信息，数据便一直存储在用户的客户端中。即使用户关闭当前[web浏览器][web]后重新启动，数据让然存在。知道用户或程序明确制定删除，数据的生命周期才会结束。

在安全性方面，localstorage是域内安全的，即localstorage是基于域的。任何在该域内的所有页面，都可以访问localstorage数据。但让然存在一个问题，就是各个浏览器厂商的浏览器之间的数据是各自独立的。也就是说，如果在firefox中使用localstorage存储一组数据，在[chrome浏览器][chrome]下是无法读取的。同样，由于localstorage数据是保存在用户的设备中的，因此同一个应用程序在不同设备上保存的数据是不同的。

[20200116204701278.png]: https://img-blog.csdnimg.cn/20200116204701278.png
[20200116204718244.png]: https://img-blog.csdnimg.cn/20200116204718244.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5cDAzMDREZXZpbg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020011620473731.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5cDAzMDREZXZpbg==,size_16,color_FFFFFF,t_70
[https_blog.csdn.net_yyp0304Devin_article_details_103206608]: https://blog.csdn.net/yyp0304Devin/article/details/103206608
[Link 1]: https://www.baidu.com/s?wd=%E6%99%BA%E8%83%BD%E6%89%8B%E6%9C%BA&tn=SE_PcZhidaonwhc_ngpagmjz&rsv_dl=gh_pc_zhidao
[web]: https://www.baidu.com/s?wd=web%E6%B5%8F%E8%A7%88%E5%99%A8&tn=SE_PcZhidaonwhc_ngpagmjz&rsv_dl=gh_pc_zhidao
[chrome]: https://www.baidu.com/s?wd=chrome%E6%B5%8F%E8%A7%88%E5%99%A8&tn=SE_PcZhidaonwhc_ngpagmjz&rsv_dl=gh_pc_zhidao