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

前言

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

假如作为一个前端人员的话，就必须对一些主流的浏览器以及他各自的兼容性有一定的了解，更要知道浏览器的特性，知道浏览器怎样存储数据，怎样释放数据。这里通过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.用法

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

 

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

 

8.结果

 

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

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

https://blog.csdn.net/yyp0304Devin/article/details/103206608

三、应用

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

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

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

 

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