LocalStorage和sessionStorage之间的区别
众所周知，自从HTML 5 标准出现之后，本地化存储一度成为热搜的关键词。在HTML 5 最开始时，本地存储有两种方式：一种是web Storage，另一种是web SQL。由于web SQL的实现是基于SQLite，它更倾向于DataBase方向，且W3C官方在2011年11月宣布不在维护web SQL规范，故其API接口目前已经不属于HTML 5的范畴。因此，目前我们常讲的HTML 5本地存储，多指的是web Storage。
下面，关于WebStorage及其两种形式作具体的描述和讲解。
1、web Storage
web Storage 是HTML 5引入的一个重要的功能，在前端开发的过程中会经常用到，它可以在客户端本地存储数据，类似cookie，但其功能却比cookie强大的多。cookie的大小只有4Kb左右（浏览器不同，大小也不同），而web Storage的大小有5MB。其API提供的方法有以下几种：
setItem (key, value) —— 保存数据，以键值对的方式储存信息。
getItem (key) —— 获取数据，将键值传入，即可获取到对应的value值。
removeItem (key) —— 删除单个数据，根据键值移除对应的信息。
clear () —— 删除所有的数据
key (index) —— 获取某个索引的key
2、localStorage
localStorage的生命周期是永久性的。假若使用localStorage存储数据，即使关闭浏览器，也不会让数据消失，除非主动的去删除数据，使用的方法如上所示。localStorage有length属性，可以查看其有多少条记录的数据。使用方法如下：
var storage = null;
if(window.localStorage){ //判断浏览器是否支持localStorage
storage = window.localStorage;
storage.setItem("name", "Rick"); //调用setItem方法，存储数据
alert(storage.getItem("name")); //调用getItem方法，弹框显示 name 为 Rick
storage.removeItem("name"); //调用removeItem方法，移除数据
alert(storage.getItem("name")); //调用getItem方法，弹框显示 name 为 null }
localStorage 相对sessionStorage简单一点，需要注意的地方不是很多。
3、sessionStorage
sessionStorage 的生命周期是在浏览器关闭前。也就是说，在整个浏览器未关闭前，其数据一直都是存在的。sessionStorage也有length属性，其基本的判断和使用方法和localStorage的使用是一致的。需要注意的有以下几点：
<1> 页面刷新不会消除数据
为了验证，我准备了两个html文件，一个是index.html，另一个是text.html。至于text.html后面在详细说其起的左右。二者的html代码如下：
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<script>
function submit() {
var str = document.getElementById("text").value.trim();
setInfo(str);
document.getElementById("text").value = "";
}
//储存数据
function setInfo(name) {
var storage = window.sessionStorage;
storage.setItem('name', name);
}
//显示数据
function shows() {
var storage = window.sessionStorage;
var str = "your name is " + storage.getItem("name");
document.getElementById("text").value = str;
}
</script>
</head>
<body>
<input type="button" value="Login" onclick="submit()" />
<input type="text" name="text" id="text" />
<input type="button" value="show" onclick="shows()" />
<a href="text.html" target="_blank">点击打开</a>
</body>
</html>
text.html页面如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var storage = window.sessionStorage;
alert(storage.getItem("name"));
</script>
</body>
</html>
打开index.html页面的结果如下：
当点击show按钮后，输入框内显示 “ your name is null“，此时sessionStorage中没有存储键值为 ”name“的数据。当在文本中输入”Rick“后，点击login按钮，输入框清空的时候数据已经存储到sessionStorage中，然后再去点击show按钮，会显示”your name is Rick“。此时，点击浏览器刷新网页，再点击show按钮，输入框中显示的依旧为”your name is Rick“
<2>只有在当前页面打开的链接，才可以访sessionStorage的数据；
还记准备好的那个text.html页面吗，这个时候轮到它发挥自己的作用了。为了验证，我们接着上面的步骤，打开text.html结果如下：
可以看到，这个值为null，无法得到”name“的值。现在，关闭这个text.html页面，通过index.html页面中的点击打开链接，可以看到如下的结果：
因此，可以得知，在当前页面打开的链接，是可以访问到sessionStorage内的数据。后来又经过其他一些测试，发现当从index.html打开text.html页面后，关闭index.html，刷新text.html还可以访问到sessionStorage中的数据。只有当全部关闭index.html和从其内部打开的所有页面 或者直接关闭浏览器，才可以消除sessionStorage中的数据。
<3>使用window.open打开页面和改变localtion.href方式都可以获取到sessionStorage内部的数据
上述两种方式，经过测试，事实确实如此。感兴趣的同学，可以真实的测试下结果。关于localStorage和sessionStorage的不同之处，就不再做总结了。
总之，使用的时候，注意以上提到的几点，在使用的时候可以避免很多没必要踩的坑。关于本文有什么不到的地方，欢迎留言批评和指正，谢谢。
原文地址：https://blog.csdn.net/fcdd123/article/details/56286106/
LocalStorage和sessionStorage之间的区别的更多相关文章
- cookie、localStorage、sessionStorage之间的区别
sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可以方便的在web请求之间保存数据.有了本地数据,就可以避免数据在浏览器和服务器间不必 ...
- vuex、localStorage、sessionStorage之间的区别
vuex存储在内存中,localStorage以文件形式存储在本地,sessionStorage针对一个session(阶段)进行数据存储. 当页面刷新时vuex存储的数据会被清除,localStor ...
- sessionStorage 、localStorage 和 cookie 之间的区别
sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可以方便的在web请求之间保存数据.有了本地数据,就可以避免数据在浏览器和服务器间不必 ...
- sessionStorage 、localStorage 和 cookie 之间的区别(转)
essionStorage .localStorage 和 cookie 之间的区别(转) 2012-05-08 14:29:19| 分类: HTML5CSS3WEBAPP|举报|字号 订阅 ...
- sessionStorage localStorage 和 cookie 之间的区别转
sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可以方便的在web请求之间保存数据.有了本地数据,就可以避免数据在浏览器和服务器间不必 ...
- sessionstorage，localstorage和cookie之间的区别以及各自的用法
由于年前辞了自己的工作,年后又开始重新找工作,参加了好几次面试,居然都遇到了同样的面试题:sessionstorage,localstorage和cookie之间的是区别? 当然,在面试的时候答的也不 ...
- localStorage和sessionStorage总结以及区别
(1)兼容的手机和浏览器: (2)使用 .setItem( key, value)存键值数据 sessionStorage.setItem("key","value&qu ...
- JS中Cookie、localStorage、sessionStorage三者的区别
cookie:大小4k,一般由服务器生成,可设置失效时间,关闭浏览器后失效,与服务器通信时:每次都会携带HTTP头中,如果使用cookie保存过多数据会带来性能问题 localhostStorage: ...
- sessionstorage，localstorage和cookie之间的区别
sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可以方便的在web请求之间保存数据.有了本地数据,就可以避免数据在浏览器和服务器间不必 ...
随机推荐
- leetcode-77-组合
题目描述: 给定两个整数 n 和 k,返回 1 ... n 中所有可能的 k 个数的组合. 示例: 输入: n = 4, k = 2 输出: [ [2,4], [3,4], [2,3], [1,2], ...
- 【转载】MDX Step by Step 读书笔记(三) - Understanding Tuples (理解元组)
1. 在 Analysis Service 分析服务中,Cube (多维数据集) 是以一个多维数据空间来呈现的.在Cube 中,每一个纬度的属性层次结构都形成了一个轴.沿着这个轴,在属性层次结构上的每 ...
- 一段话理解 MDX中的Select 、轴、COLUMNS、ROWS
理解 SELECT Understanding the SELECT statement SELECT 语句的目的是定义新的 Cube 空间,新的Cube 空间是由类似于 COLUMNS或者ROWS ...
- Developer Friendly | 基础设施即代码的事实标准Terraform已支持京东云！
Developer Friendly | 基础设施即代码的事实标准Terraform已支持京东云! Chef.Puppet.Ansible.SaltStack 都可以称为配置管理工具,这些工具的主要目 ...
- MyBatis学习笔记（一）创建第一个MyBatis项目
一.新建Maven项目 http://www.mybatis.org/mybatis-3/zh/index.html 该链接为MyBatis官方地址 创建MyBatis项目主要有两种办法,一种是导入j ...
- （一）Audio子系统之AudioRecord.getMinBufferSize
在文章<基于Allwinner的Audio子系统分析(Android-5.1)>中已经介绍了Audio的系统架构以及应用层调用的流程,接下来,继续分析AudioRecorder方法中的ge ...
- HTML5创业的另一种可能
当一种新的颠覆式技术出现,是投靠大平台还是坚持走独立的道路? HTML5(下称H5)火了.在多数人还没完全弄清楚什么是H5时,它已悄无声息地潜入移动端,并渐呈燎原之势火速席卷云寻觅云寻觅. 以前,H5 ...
- Jexus进程守护工具jws.guard
一个运行中的进程,难免会因为各种各样的原因无缘无故的宕掉(比如网站瞬间的负载过高.内存不足等),而Jexus宕掉的后果往往只有一个:对外提供服务的网站无法访问了.因此,我们需要最大限度的保障我们的网站 ...
- 实现基于NTP协议的网络校时功能
无论PC端还是移动端系统都自带时间同步功能,基于的都是NTP协议,这里使用C#来实现基于NTP协议的网络校时功能(也就是实现时间同步). 1.NTP原理 NTP[Network Time Protoc ...
- WPF中后台代码停止RepeatBehavior=RepeatBehavior.Forever的办法
1.在使用Begin()方法启动动画的时候,要将isControlable设置成true,就是Begin方法的第二个参数 scanningStoryBoard.Begin(this,true);// ...