前几天项目中用到了本地储存，虽然说也就是几个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的销毁数据问题的更多相关文章

  1. <<< html5本地储存

    类似与Cookies,但由于Cookies储存量太小,大小也只有4-5KB的样子,html5的本地储存能存5M大小的数据 html5本地储存属性有,localStorage和sessionStorag ...

  2. JavaScript工具类（三）：localStorage本地储存

    localStorage Web 存储 API 提供了 sessionStorage (会话存储) 和 localStorage(本地存储)两个存储对象来对网页的数据进行添加.删除.修改.查询操作. ...

  3. HTML5中本地储存概念是什么，什么优点 ，与cookie有什么区别？

    html5中的Web Storage 包括了两种存储方式: sessionStorage  和  localStorage. seessionStorage 用于本地存储一个会话(session)中的 ...

  4. HTML5 本地存储 localStorage、sessionStorage 的遍历、存储大小限制处理

    HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localSt ...

  5. HTML5本地存储之localStorage、sessionStorage

    1.概述 localStorage和sessionStorage统称为Web Storage,它使得网页可以在浏览器端储存数据. sessionStorage保存的数据用于浏览器的一次会话,当会话结束 ...

  6. HTML5本地存储localStorage与sessionStorage

    在最近的项目中用到了html5的本地存储,下面总结一下. 1.html5几种存储形式 本地存储(localStorage && sessionStorage) 离线缓存(applica ...

  7. HTML5本地存储应用sessionStorage和localStorage

    在html5之前,浏览器要实现数据的存储,一般都是用cookie,但是cookie有域名和大小限定. html5流行之后,可以通过localStorage和sessionStorage实现浏览器端的数 ...

  8. HTML5本地存储localStorage与sessionStorage详解

    前言 在最近的项目中用到了html5的本地存储,下面总结一下. 1.html5几种存储形式 本地存储(localStorage && sessionStorage) 离线缓存(appl ...

  9. HTML5本地存储localStorage、sessionStorage及IE专属UserData

    By:王美建 from:http://www.cnblogs.com/wangmeijian/p/4518606.html 转载请保留署名和出处! 在客户端存储数据用的最普遍的方式非cookie莫属, ...

随机推荐

  1. Set tooltip on customized tab header in WPF

    <UserControl> <UserControl.Resources> <ResourceDictionary> <ResourceDictionary. ...

  2. [javascript-snippet]使用javascript+html5实现图片的灰度处理

    // 源码出自:潇湘夜雨<!DOCTYPE> <html> <head> <meta charset="utf-8"/> </ ...

  3. Android-Kotlin-配置/入门

    1.配置Kotlin开发插件,点击File菜单,选择Settings,选择Plugins,会显示扩展的插件; 2.然后选择Browse repositories...,搜索栏目中搜索Kotlin即可, ...

  4. yum安装jdk如何配置JAVA_HOME

    安装Java环境 yum -y install java-1.8.0-openjdk.x86_64 java-1.8.0-openjdk-devel.x86_64 查看安装后的配置 java -ver ...

  5. C++ OCCI API数据库操作之连接、返回查询结果集为json格式

    使用C++操作数据库,转换返回结果集为json格式,易于解析. 以下程序的编译.运行环境:Windows 10 1803.VS2017 17.5.2(vc14).解决方案配置:Release.解决方案 ...

  6. dot net core 使用 IPC 进程通信

    本文告诉大家如何使用dot net core 和其他进程进行通信 一般都是使用 WCF 或 remoting 做远程通信,但是 dot net core 不支持 WCF 所以暂时我就只能使用 管道通信 ...

  7. 浏览器环境下JavaScript脚本加载与执行探析之代码执行顺序

    本文主要基于向HTML页面引入JavaScript的几种方式,分析HTML中JavaScript脚本的执行顺序问题 1. 关于JavaScript脚本执行的阻塞性 JavaScript在浏览器中被解析 ...

  8. Facebook内部报告：争取青少年用户的鸡贼小技巧

    翻译:吴祺深 欢迎访问网易云社区,了解更多网易技术产品运营经验. 去年十月,Facebook收购了TBH,最后却关闭了这款APP,不过一则内部报告透露了,通过这款流行的投票APP,这家公司学会了如何去 ...

  9. 《Python自动化运维之路》 系统基础信息模块(一)

    系统性能收集模块Psutil 目录: 系统性能信息模块psutil 系统性能信息模块psutil psutil能够轻松实现获取系统运行的进程和系统利用率包括(CPU,内存,磁盘 和网络)等.主要用于系 ...

  10. Spring Boot使用@Async实现异步调用：自定义线程池

    前面的章节中,我们介绍了使用@Async注解来实现异步调用,但是,对于这些异步执行的控制是我们保障自身应用健康的基本技能.本文我们就来学习一下,如果通过自定义线程池的方式来控制异步调用的并发. 定义线 ...