HTML5本地储存sessionStorage的销毁数据问题
前几天项目中用到了本地储存，虽然说也就是几个api，但之前有一个问题一直没有去想，我们知道本地储存分为两种，一种是临时储存，关闭浏览器后数据就会销毁，另外一种是没有时间限制的储存，我们做的这个页面比较适合使用临时储存，而本次要讲的也就是临时储存的一个问题。页面长下面这样
我需要把用户选择了的信息保存下来，放到下个页面显示（产品经理嫌这个页面内容太多了），在下面这个页面取数据。
效果大概就是这样，而我想知道的一个问题是，这个sessionStorage到底什么时候会将数据销毁，之前只知道关闭浏览器数据就会销毁，但具体怎么才算关闭就不是很清楚了，更别提在手机上了，但为了以后不再为这个问题而困惑，也就只有动手咯。
PC端测试
首先有两个页面，分别是index.html（用来储存数据）和index2.html（用来取数据）代码如下。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="index2.html">获取sessionStorage数据</a>
<script>
sessionStorage.messg = "所谓的害怕，就是看不见吧";
</script>
</body>
</html>
index2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
alert(sessionStorage.messg);
</script>
</body>
</html>
先打开index.html然后打开index2.html，发现弹出的是undefined，也就是说index2.html访问不到index.html中的数据，效果如下
尝试了一下，通过超链接过去的是可以获取到数据的，效果如下
为了验证是否通过超链接才有效，于是新建了一个index3页面，在index2页面中加入超链接，链接到index3页面中，效果如下
以上信息说明了sessionStorage中的数据只对本页面中的超链接有效。
我们接着来解决下一个问题，点浏览器X才算关闭页面，还是关闭当前页面就算是关闭？如下图
经过测试，直接点击关闭浏览器，数据销毁了。
关闭当前页面数据的销毁与否有两种情况，如果它的页面中没有其他的超链接，或者没有打开，那么关闭当前页面，数据就会被销毁。而如果通过当前这个页面，打开了其他的页面，那么只有当这些页面都关闭了，数据才会销毁。
还是拿刚刚那几个页面做实验，效果如下
我从index页面打开了index2页面，注意我在index.html中修改了a链接的target属性
<a href="index2.html" target="_blank">获取sessionStorage数据</a>
接着我将index.html关闭，刷新index2.html，弹出如下
这也就验证了以上的结论。
我猜测通过window.open打开也是可以获取到数据的，事实证明也确实可以，代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
<div id="box">点我跳转到index2.html</div>
<script>
sessionStorage.messg = "所谓的害怕，就是看不见吧";
var box = document.getElementById("box");
box.onclick = function(){
window.open("./index2.html");
};
</script>
</body>
</html>
既然如此，我想通过location.href改变url路径也应该可以，效果如下
在移动端测试了一下，和PC端类似，在微信公众号的网站中，直接点击关闭按钮，或者是后退到公众号界面，才算是关闭。在UC中，a链接跳转始终在页面窗体中，所以关闭当前窗体就算关闭。
因为以上的这几个原因，在获取数据的时候就会出现一个问题，用户在某个下单页，选择了某个商品，然后他又跳到了另外一个商品上面，那么就会将上一个商品选中的信息在这个商品上显示,在项目中我们的解决方案是，通过商品ID和储存数据中的ID判断，如果相同才去渲染之前选中的数据。
HTML5本地储存sessionStorage的销毁数据问题的更多相关文章
- <<< html5本地储存
类似与Cookies,但由于Cookies储存量太小,大小也只有4-5KB的样子,html5的本地储存能存5M大小的数据 html5本地储存属性有,localStorage和sessionStorag ...
- JavaScript工具类（三）：localStorage本地储存
localStorage Web 存储 API 提供了 sessionStorage (会话存储) 和 localStorage(本地存储)两个存储对象来对网页的数据进行添加.删除.修改.查询操作. ...
- HTML5中本地储存概念是什么，什么优点 ，与cookie有什么区别？
html5中的Web Storage 包括了两种存储方式: sessionStorage 和 localStorage. seessionStorage 用于本地存储一个会话(session)中的 ...
- HTML5 本地存储 localStorage、sessionStorage 的遍历、存储大小限制处理
HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localSt ...
- HTML5本地存储之localStorage、sessionStorage
1.概述 localStorage和sessionStorage统称为Web Storage,它使得网页可以在浏览器端储存数据. sessionStorage保存的数据用于浏览器的一次会话,当会话结束 ...
- HTML5本地存储localStorage与sessionStorage
在最近的项目中用到了html5的本地存储,下面总结一下. 1.html5几种存储形式 本地存储(localStorage && sessionStorage) 离线缓存(applica ...
- HTML5本地存储应用sessionStorage和localStorage
在html5之前,浏览器要实现数据的存储,一般都是用cookie,但是cookie有域名和大小限定. html5流行之后,可以通过localStorage和sessionStorage实现浏览器端的数 ...
- HTML5本地存储localStorage与sessionStorage详解
前言 在最近的项目中用到了html5的本地存储,下面总结一下. 1.html5几种存储形式 本地存储(localStorage && sessionStorage) 离线缓存(appl ...
- HTML5本地存储localStorage、sessionStorage及IE专属UserData
By:王美建 from:http://www.cnblogs.com/wangmeijian/p/4518606.html 转载请保留署名和出处! 在客户端存储数据用的最普遍的方式非cookie莫属, ...
随机推荐
- C#版ObjectId
近来在准备弄一个开源的HIS,但一周过去了几乎没有进度.就卡在ID如何生成.HIS的数据库压力大,如何多数据库支持,减轻压力一直想去实现.拿不准纯数字ID段还是GUID一类的文本ID.最终在mongo ...
- CentOS 6 安装Redmine
Redmine是一个灵活的项目管理web应用,采用Ruby on Rails框架开发.Redmine是典型的web 2.0网站,项目管理系统的后起之秀.Redmine支持多项目,灵活的角色权限管理,灵 ...
- C语言注意点汇总
计算机的一切源头都是0和1,其中0:断电,1:有电. 计算机语言发展史:机器语言--汇编语言--高级语言.机器语言0.1直接对硬件起作用.汇编语言,给机器语言添加了一些符号,使其更易于让人理解.记忆. ...
- 微信小程序-button组件
主要属性: 注:button-hover 默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;} 效果图: ml: <!--默认的but ...
- nodeclub
nodeclub笔记:https://cnodejs.org/topic/535601a20d7d0faf140303d8 先看一下框架,把没有接触过的部分熟悉一下. 熟悉一下package.json ...
- delphi 分享三个随机字符串
uses math; function GenID:String; var b, x: byte; begin Result := '{'; Randomize; do begin ) > ,) ...
- Spring 使用javaconfig配置
除了使用xml,spring提供javaconfig配置,下面是简单的例子: 1.声明接口 /** * */ package com.junge.demo.spring.service; /** * ...
- oracle的删除方法
手工彻底删除oracle 第一步:停用全部oracle服务 第二步:删除oracle注册表运行regedit在如下路径中找到oracle相关键值,删除 HKEY_LOCAL_MACHINE\SOFTW ...
- 浅析C#中的Thread ThreadPool Task和async/await
.net 项目中不可避免地要与线程打交道,目的都是实现异步.并发.从最开始的new Thread()入门,到后来的Task.Run(),如今在使用async/await的时候却有很多疑问. 先来看一段 ...
- Asp .Net core 2 学习笔记(1) —— Starup
这个系列的初衷是便于自己总结与回顾,把笔记本上面的东西转移到这里,态度不由得谨慎许多,下面是我参考的资源: ASP.NET Core 中文文档目录 官方文档 记在这里的东西我会不断的完善丰满,对于文章 ...