SessionStorage 和 LocalStorage 的辨析

SessionStorage 和 LocalStorage 是浏览器提供的两种数据存储机制，当然这种实现是依据 HTML5 Web 存储标准，具体使用非常简单大家可以自行查阅相关资料。此外目前还有两种很有用的前端存储机制分别叫做 WEB SQL、IndexedDB（这里注意的是：Web SQL 已经不再是 W3C 的标准，不过有意思的是 w3c 表示不将其纳入标准这么多年之后，浏览器中至今仍有 chrome 依然毫不犹豫的支持该标准，Firefox、edge、IE 均已不在支持。详情点击查看）Web SQL 是后端程序员熟知的关系型数据库，具体实现采用的是智能手机中常用的微型关系数据库 SQLite。而 indexedDB 则是后端程序员熟知的另一种非关系型数据库（NOSQL），即近几年新流行起来的非关系型数据库，如果你不熟悉那就可以简单的理解成 key-value 形式的存储模型，感兴趣的可以自行搜索了解更多。这些内容不再本次讨论范围内。

SessionStorage 和 LocalStorage 使用操作基本类似，两者最主要的区别在于生命周期不同，SessionStorage 顾名思义就是存在与会话阶段，当会话结束时，SessionStorage 存储的数据即会失效。那么关键来了什么才表示会话结束？其实在浏览器中一个活动标签页即代表一个会话【Session 说道这里，可能对后端比较熟悉的小伙伴会想到 HTTP 会话中 SessionID，没错这里两者存在一定的联系，但并不完全等同，由于 session ID 存在是为了解决 HTTP 协议的无状态性，要使基于 HTTP 协议的会话能够得以维持就需要通过 session id 来实现，并且 session 的实现依赖的是 cookie 机制，OK 点到为止，详情大家自行查阅】，如果当前标签页被关掉即代表，当前会话结束，此时当前 SessionStorage 中存储的数据就会被浏览器自动销毁。

相比之下 LocalStorage 生命周期就很长了，LocalStorage 是可以一直存活的，哪怕是你关闭浏览器，他依然存在。除非人为手动删除，所以我们可以将一些需要永久性存储的数据放置在 LocalStorage 中（当然也可以是 Cookie 中，当然鉴于 cookie 的特自动携带传输的特性，如果不是每次都有必要携带的数据请求就不要放在 cookie 中，这样不仅浪费带宽，而且通常情况下前考虑到安全性，一般都是不允许前端使用 JS 直接操作 cookie 的），而那些只需要在会话阶段需要存在的数据则放在 SessionStorage 中。

最后再多啰嗦一句，尽管这些存储机制都有自己的一些特色，但是他们也都遵循一条原则，那就是 “同源策略”。关于同源策略铺开讲也内容也是很多的，大家可以自行搜索了解。

自己之前的几个疑问？

1. 那么使用浏览器打开两个同样的网站，这两个网站的 SessionStorage 是共享的吗？

答案：当然是不能共享的。不明白的话仔细阅读第二段话。

2. 当我们重新刷新一个页面那么 SessionStorage 中的数据会消失吗？

答案：当然还是不会，即使你使用的是强制刷新仍旧不会使 SessionStorage 数据消失，即 SessionStorage 里面的数据只会在当前活动的标签页中关闭掉之后才会消失。

3. 浏览器刷新到底做了什么？

浏览器刷新做的只是重新加载网页数据【强制刷新的区别只是不使用浏览器缓存下来的HTML、JS数据，所有本页面用到的HTML、JS都需要重新向服务器获取】，并重新解析生成 DOM 树，当然还同时会重新解释执行 JavaScript 代码，之后重新绘制页面，注册绑定事件，之前页面在活动的时候对 JavaScript 变量做的数据赋值数据都会消失。

PS：个人在使用前后端完全分离的开发的模式的情况下，更喜欢使用 SessionStorage 和 LocalStorage 来进行数据存储。感觉这两种存储方式非常适合 SPA 这种开发模式。

SessionStorage 和 LocalStorage 生命周期以及浏览器刷新操作意味着什么？相关推荐

html5 localstorage 生命周期,cookie、localStorage和sessionStorage 三者之间的区别以及存储、获取、删除等使用方式...
写在前面: 前端开发的供个到效近一项消果近一项消果近一项消果近时候,在网页刷新的时候,所有数据都会被清空,这时候就要用到本地存储的技术,前端本地存储的方式有三种,分别是cookie,localstor ...
一文读懂cookie、sessionStorage和localStorage的区别
cookie.sessionStorage和localStorage的区别 cookie 什么是cookie? cookie的构成 cookie的特点 Cookie并不提供修改.删除操作封装setC ...
sessionStorage和localStorage的用法，不同点和相同点
一,共同点 (1)存储时用setItem: localStorage.setItem("key","value");//以"key"为名称存 ...
Vue01 vue基础、mvvm、ES6z知识点、计算属性、生命周期
Vue案例: <body> <div id="app"><fieldset><legend>inf ...
浏览器储存之Cookie、sessionStorage、localStorage和indexedDB区别与详解
一般在项目中我们逗需要把信息存储在本地的情况,比如权限验证的token.用户信息.埋点计数.客户配置的皮肤信息或语言种类等,我们可以暂存一下避免浏览器不必要的请求和客户多余操作,较少请求从而提高性能以 ...
cookies、sessionStorage和localStorage以及vuex解释及区别
在浏览器查看 HTML4的本地存储 cookie 浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式,可以利用cookie,session等跟服务端进行数据交互. 一.cookie和sessio ...
javascript中sessionStorage 、localStorage 和 Cookie
javascript中sessionStorage .localStorage 和 Cookie 欢迎访问我的博客,祝码农同胞们早日走上人生巅峰,迎娶白富美~~~ 参考文章:JS 详解 Cookie. ...
ASP.NET 应用程序生命周期概述
本主题概述应用程序生命周期,列出重要的生命周期事件,并描述如何编写适合应用程序生命周期的代码.在 ASP.NET 中,若要对 ASP.NET 应用程序进行初始化并使它处理请求,必须执行一些处理步骤.此 ...
IIS 5.0 和 6.0 的 ASP.NET 应用程序生命周期
本文内容应用程序生命周期概述生命周期事件和 Global.asax 文件编译生命周期 HTTP 模块本文概述 VS 2008 ASP.NET 应用程序的生命周期,列出了重要的生命周期事件,并描 ...

SessionStorage 和 LocalStorage 生命周期以及浏览器刷新操作意味着什么？

SessionStorage 和 LocalStorage 的辨析

自己之前的几个疑问？

1. 那么使用浏览器打开两个同样的网站，这两个网站的 SessionStorage 是共享的吗？

2. 当我们重新刷新一个页面那么 SessionStorage 中的数据会消失吗？

3. 浏览器刷新到底做了什么？

SessionStorage 和 LocalStorage 生命周期以及浏览器刷新操作意味着什么？相关推荐

最新文章

热门文章

SessionStorage 和 LocalStorage 生命周期 以及 浏览器刷新操作意味着什么？

SessionStorage 和 LocalStorage 的辨析

自己之前的几个疑问？

1. 那么使用浏览器打开两个同样的网站，这两个网站的 SessionStorage 是共享的吗？

2. 当我们重新刷新一个页面那么 SessionStorage 中的数据会消失吗？

3. 浏览器刷新到底做了什么？

SessionStorage 和 LocalStorage 生命周期 以及 浏览器刷新操作意味着什么？相关推荐

最新文章

热门文章

SessionStorage 和 LocalStorage 生命周期以及浏览器刷新操作意味着什么？

SessionStorage 和 LocalStorage 生命周期以及浏览器刷新操作意味着什么？相关推荐