HTML5本地储存sessionStorage的销毁数据问题

时间 2019-11-12

标签 html5 html 本地储存 sessionstorage 销毁数据问题栏目 HTML5 繁體版

原文原文链接

博客采集来自于javascript

http://www.cnblogs.com/pssp/p/6395530.htmlhtml

的博客，很感谢她。追梦子，让咱们一块儿进步吧。java

前几天项目中用到了本地储存，虽说也就是几个api，但以前有一个问题一直没有去想，咱们知道本地储存分为两种，一种是临时储存，关闭浏览器后数据就会销毁，另一种是没有时间限制的储存，咱们作的这个页面比较适合使用临时储存，而本次要讲的也就是临时储存的一个问题。页面长下面这样django

我须要把用户选择了的信息保存下来，放到下个页面显示（产品经理嫌这个页面内容太多了），在下面这个页面取数据。api

效果大概就是这样，而我想知道的一个问题是，这个sessionStorage到底何时会将数据销毁，以前只知道关闭浏览器数据就会销毁，但具体怎么才算关闭就不是很清楚了，更别提在手机上了，但为了之后再也不为这个问题而困惑，也就只有动手咯。浏览器

PC端测试微信

首先有两个页面，分别是index.html（用来储存数据）和index2.html（用来取数据）代码以下。session

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判断，若是相同才去渲染以前选中的数据。