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请求之间保存数据.有了本地数据,就可以避免数据在浏览器和服务器间不必 ...
随机推荐
- Keil RTX使用 os_mut_init 报Hard Fault 错误解决记录
首先确定你的软件是在互斥信号初始化的位置,在以下几个位置,将会报Hard Fault 错误: (1).os_sys_init_user 用户线程创建之前 (2).os_tsk_create_user之 ...
- Laravel 的核心概念
工欲善其事,必先利其器.在开发Xblog的过程中,稍微领悟了一点Laravel的思想.确实如此,这篇文章读完你可能并不能从无到有写出一个博客,但知道Laravel的核心概念之后,当你再次写起Larav ...
- IOS----UIScrollerView的使用
刚刚遛狗回来,前段时间创建的这篇博客一直没有填充内容,今天把scrollerview正好整理一下. 1.scrollerview的主要作用:当界面显示不开要显示的内容,scrollerview提供了滑 ...
- django在model中添加字段报错
在以下类中添加 description 字段后, class Colors(models.Model): colors = models.CharField(u'颜色', max_length=10) ...
- js01--简介、注释、数组、对象、null与undefined
javascript简介:js,轻量级的脚本语言,插入HTML页面中,用来实现网页的动态交换. 1.js的使用: 写入HTML输出:document.write("<p>This ...
- hiho# 1398 最大权闭合子图 网络流
题目传送门 题意:给出n个活动,m个人,请人需要花费$a[i]$的钱,举办一次活动可以赚$b[i]$的钱,但是需要固定的几个人在场,一个人只需要请一次后就必定在场,问最大收益. 思路: 下列结论来自h ...
- ajax防止表单自动提交
重写表单的checkForm方法,并用if和else解决异步判断的问题. function checkForm(){ 1 var flag = false; $.ajaxSetup({async : ...
- SpringMVC初写（一）SpringMVC的配置方式
1.Spring概述a)SpringMVC是什么?SpringMVC是Spring框架内置的MVC实现.SpringMVC就是一个Spring内置的MVC子框架MVC:Model-View-Contr ...
- 一、OPENERP 的一个demo
安装好OPENERP后,使用 ps -aux|grep openerp 从输出的内容可以得到OPENERP的安装信息, /usr/bin/python /usr/bin/openerp-server ...
- Mac 10.12打开任何来源选项
在终端中输入: sudo spctl --master-disable 然后输入密码即可.最终会出现如下图所示: