浏览器有三种本地存储方式：

1、localstorage
2、sessionStorage
3、cookie

浏览器 F12 打开调试模式，可以看到：

点击对应域名，可以看到当前域名下存储的数据，是以key，value形式存储的。

三种方式的共同点：

都是保存在浏览器端
仅同源可用的本地存储方式

localStorage

localStorage：用于持久化的本地存储，即使浏览器重启，甚至操作系统重启也不会丢失，并且存储的数据在同源（协议、域名、端口号一致）下的标签页和window窗口之间共享。

特点

每个域名给 localStorage 分配的存储空间是5M
只要在相同的协议，域名，端口下就能读取或修改同一份localStorage数据
生命周期永久，除非用户手动清除浏览器中的localStorage信息，否则永远存储
仅在浏览器中保存，不参与服务器通信

API：

localStorage.setItem("key","value");//以“key”为名称存储一个值“value”
localStorage.getItem("key");//获取名称为“key”的值
localStorage.removeItem("key");//删除名称为“key”的信息。
localStorage.clear();//清空localStorage中所有信息

sessionStorage

sessionStorage：存储一个会话的数据，页面刷新仍然有效，选项卡关闭时数据丢失。

特点

仅在当前会话下有效，关闭页面或者浏览器后被清除
每个域名给 sessionStorage 分配的存储空间是5M
仅在浏览器中保存，不参与服务器通信
可以接受原生接口，亦可以再次封装来对 Object 和 Array 有更好的支持
sessionStorage除了相同的协议，域名，端口外，还要求在同一窗口下
sessionStorage是在同源的同窗口（或tab）中，始终存在的数据
只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一页面，数据仍然存在。
关闭窗口后，sessionStorage即被销毁。
同时”独立”打开的不同窗口，即使是同一页面，sessionStorage对象也是不同的
在相同标签页打开的多个iframe之间数据可以共享(同源的情况下)

API

sessionStorage.setItem("key","value");//以“key”为名称存储一个值“value”
sessionStorage.getItem("key");//获取名称为“key”的值
sessionStorage.removeItem("key");//删除名称为“key”的信息。
sessionStorage.clear();//清空sessionStorage中所有信息

localStorage与sessionStorage区别

我经常用到的存储方式为localStorage与sessionStorage，因此需要清楚了解它们之间的区别：

localStorage与sessionStorage的API调用方法相同
sessionStorage 和 localStorage 不会自动把数据发给服务器，仅在本地保存
不同浏览器无法共享localStorage或sessionStorage中的信息
相同浏览器的不同页面可以共享相同的localStorage（前提是页面属于相同域名和端口）
相同浏览器的不同页面无法共享sessionStorage的信息

页面及标签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间可以共享sessionStorage。
也就是说：在当前页面打开的链接和页面，可以访问sessionStorage的数据，在当前页面关联的src链接也可以获取到sessionStorage数据。

存储事件

每当Storage对象发生变化时，都会触发storage事件（增删改查）。

这个事件的时间对象有4个属性：

domain：存储变化对应的域
key：被设置或被删除的键
newValue：键被设置的新值，若被删除则为null
oldValue：键变化之前的值

注意：Storage类型只能存储字符串。非字符串数据在存储之前会自动转换为字符串，并且这种转换不能在获取数据时撤销。
也就是说：在获取storage数据时，拿到的一定是字符串，需要自己手动转换数据类型。

Cookie

特点

cookies是始于特定域名绑定的，设置之后，会和请求一起发送到服务器端。（这个限制能够保证cookie中存储的信息只对被认可的接收者开放，不被其它域访问。）
cookie 是网站为了标示用户身份而储存在用户本地终端上的数据。（通常都是经过加密的）
cookie 数据始终在同源的http请求中携带（即使不需要），即会在浏览器和服务器间来回传递；
cookie 与服务器端通信，每次都会携带在HTTP头中，因此， cookie 存储数据过多会带来性能问题。

生命周期

在cookie设置的过期时间之前一直有效，即使窗口或者浏览器关闭；

限制

不超过300个cookie；
每个cookie不超过4096字节（4kb)；
每个域不超过81920字节；
有存储个数限制（各浏览器不同），一般每个域不超过20个；

获取 cookie

document.cookie

以上代码会返回包含页面中所有有效cookie的字符串，以分号分隔。
所有名称和值都是URL编码，所以必须使用decodeURIComponent()解码。

设置 cookie

name=value; expires=expiration_time; path=domain_path; domain=domain_namel secure
//在所有这些参数中，只有cookie的名称和值是必须的document.cookie = `${encodeURIComponent('name')}=${encodeURIComponent('nanjiu')};domain=bettersong.github.io;`

删除cookie

cookie 的删除没有直接方法，可以通过设置其过期时间，从而达到删除效果。

示例：

document.cookie = 'uid=dkfywqkrhkwehf23;expires=' + new Date(0) + ';path=/;secure;

应用场景：

用vue做的后台管理平台，允许打开多个页面，不同页面可登陆不同的用户，用户之间互不干扰。
如果使用localStorage，因为相同域名和端口，会导致不同页面数据共享，从而引发混乱。如果采用sessionStorage，不同页面即可保证互不干扰，且vue为SPA，无需打开新的页面，因此不会相互干扰。

html 浏览器存储方式相关推荐

解决浏览器存储问题，不得不了解的cookie,localStorage和sessionStorage
浏览器存储方式一.浏览器存储的方式二.cookie.localStorage和sessionStorage 1.cookie.localStorage和sessionStorage是什么? (1) ...
js cookie 存储checkbox_浏览器数据存储方式总结，网友：“精辟”！
今天主要来讲下前端的数据存储,说起数据存储,大家肯定第一时间想起cookie,localstorage,sessionstorage,而其实还有userData和IndexedDB这两种数据存储,接下 ...
浏览器存储的方式有哪些
浏览器存储的方式有哪些补充:cookie 原本并不是用来储存的,而是用来与服务端通信的,需要存取请自行封装 api. 而 localStorage 则自带 getItem 和 setItem 方法, ...
前端百题斩【024】——我从浏览器控制台看到了五种存储方式
写该系列文章的初衷是"让每位前端工程师掌握高频知识点,为工作助力".这是前端百题斩的第24斩,希望朋友们关注公众号"执鸢者",用知识武装自己的头脑. 打开浏览器 ...
浏览器中数据的存储方式
cookie 解决问题 http 请求是无状态的,即使第一次和服务器连接后并且登录成功后,第二次请求服务器依然不知道当前请求是哪个用户. cookie 第一次登录后服务器返回一些数据(cookie)给 ...
Spring Cloud应用开发（七：使用Git存储方式实现分布式配置管理）
1.使用Git存储实现管理: 1.1.配置Git.在Git上创建microservice-study-config目录,并在目录中添加开发,预发布和测试的配置文件: 1.2.修改服务端配置文件.将mi ...
《iOS取证实战：调查、分析与移动安全》一3.4　数据存储方式
3.4 数据存储方式 iPhone上的数据以很多方式进行存储.下面的小节涵盖了每一个数据存储的形式以供审查者了解潜在的证据如何定位或恢复. 内部存储: SQLite 数据库文件: 属性列表: 网络: ...
Session 存储方式
简单来说,Session就是服务器给客户端的一个编号,当一台web服务器运行时,可能是有多个用户都在浏览这台服务器上的网站,当每个用户首次与这台服务器建立连接时,它就与这个服务器建立了一个Sessi ...
HTML5 Web 客户端五种离线存储方式汇总
为什么80%的码农都做不了架构师?>>> 最近折腾HTML5游戏需要离线存储功能,便把目前可用的几种HTML5存储方式研究了下,基于HT for Web写了个综合的实例,分别利 ...

html 浏览器存储方式