1.需求

在项目中碰到这样的需求，在父窗口中通过某个操作，连接或者button按钮触发事件，然后跳转到一个新的窗口，在这期间需要把父窗口中的数据传递到子窗口，然后在子窗口中清除缓存，传递的对象数据仍然存在。

数据在浏览器中的存储有很多种，依赖于服务器端的session，cookie等操作皆可用来存储数据，以便我们在其他操作中继续使用该数据。session的作用仅限于当前页面的操作，如果回话结束或者 x掉浏览器的页面，都会造成session的清空。而cookie则会一直存在于浏览器中，除非你清除缓存，该数据就没了。除此之外，window中还提供了一些存储方法来提供子窗口对父窗口的引用，那么只要你父窗口不关闭，那么子窗口依然能引用到父窗口的数据，几遍你将缓存清除，因为父窗口没被刷新操作。另外一种方式便是使用localstorage来存储数据，它是存储在本地的，只要你不去主动销毁，它是一直存在的。所以存在localstorage中也是可以的。看看这几种存储数据是怎么操作的，怎么销毁的。

2.存储方式

2.1 cookie数据存储

官方提供的存储方式：document.cookie = "username=chenqk";这种形式，就可以把数据存储到cookie中了。

但是如果你这么定义：document.cookie = "username=chenqk;age=18;sex=男"，那我document。cookie中实际存储的就是username=chenqk，而不是上面我们定义的，想想应该是这种形势下，它会以分号作为分隔符，每一个分隔符代表一个cookie，而他取到第一个分好之后的数据就舍弃了。换种说法，如果我要把这三个参数都存到cookie中，那么我得document.cookie = "username=chenqk";这样写三遍，是不是觉得挺傻。但是它cookie的存储是可以把你每次往cookie中存的数据都放到cookie中就相当于array的concat。

我在第一个页面中这么定义：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="application/javascript">
        function jumpToOtherPage(){
            document.cookie = "username=chenqk;age=18;sex=男";
            window.open("test2.html");
        }

    </script>
</head>
<body>
    the first page !<br>
    <input type="button" value="Jump to other page" onclick="jumpToOtherPage()">

</body>
</html>

在跳转到第二个页面时将参数存到cookie中，然后在第二个页面引用cookie中的数据：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="application/javascript">
        function showTheValue() {
            var cookie_items = document.getElementById("showCookieParam");
            if (document.cookie) {
                var strArray = document.cookie.split(";");
                for (var i = 0; i < strArray.length; i++) {
                    var arr_0 = strArray[i].split("=")[0];
                    var arr_1 = strArray[i].split("=")[1];
                    var node_label = document.createElement("label");
                    node_label.innerText = arr_0+":";
                    var node_span = document.createElement("span");
                    node_span.innerText = arr_1;
                    cookie_items.appendChild(node_label);
                    cookie_items.appendChild(node_span);
                }
            }
        }
    </script>
</head>
<body>
<input type="button" value="show the value" onclick="showTheValue()">
<div id="showCookieParam" style="width:100px;height: 200px;"></div>
</body>
</html>

我们来看看点击跳转之前的数据：

点击跳转之后的cookie:

看来数据是存进去了，但是好像不对，修改一下方式：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="application/javascript">
        function jumpToOtherPage() {
            document.cookie = "username=chenqk";
            document.cookie = "age=18";
            document.cookie = "sex=男";
            window.open("test2.html");
        }

    </script>
</head>
<body>
the first page !<br>
<input type="button" value="Jump to other page" onclick="jumpToOtherPage()">

</body>
</html>

结果是对的：

除了JS提供的方法外，一些框架也做到对这种方式的支持

Jquery : 存储 $.cookie("username","chenqk") 获取：$.cookie("username");

Angularjs : 存储 $cookieStorage.put("username","chenqk") 获取 : $cookieStorage.get("uername");

对比出来，我还是喜欢angularjs这种方式来存储。这几种存储方式都差不多，清除缓存的时候都是不能保存的。

2.2 window存储数据

window提供了一种取父窗口的数据方式是通过opener来获取父窗口的引用。

我们可以在父窗口中定义一些需要传递的参数，并将这些参数信息传递给子窗口。

在父窗口中定义：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="application/javascript">
        function jumpToOtherPage() {
            window.obj = {value:"I am teacher"};
            window.open("test2.html");
        }

    </script>
</head>
<body>
the first page !<br>
<input type="button" value="Jump to other page" onclick="jumpToOtherPage()">

</body>
</html>

跳转之前是没有数据的：

跳转之后的数据：

来看看在子窗口中是否能取到，确实是有的：

来试试我如果将缓存清除了，他还会存在么：

也是存在的，那如果我清除缓存之后在刷新父窗口呢，其实在这里发现只要父窗口的数据不丢失，那么我在

子窗口中是一定能引用到的。

父窗口中确实没有了，那么对应的子窗口中也引用不到了。还有一种情况如果我在子页面清除缓存之后，我们

知道清除缓存之后，session肯定会丢失，那么就需要用户重新登录。如果我在子窗口中直接登录，但是我还没

来得及登录就把父窗口叉掉了，那么这个参数我还能取到么？来猜想一下，应该是取不到的，因为依赖的窗口都没了

window对应的也就消失了，也就不存在保存的数据了。

2.3 localStorage保存数据

localStorage作为存储数据功能，比cookie要强大，如果数据量比较大的时候还是使用localStorage。此外

localstorage没有过期时间。在你创建之后一直存在，除非程序执行删除操作。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="application/javascript">
        function jumpToOtherPage() {
            localStorage.username = "I am a teacher";
            window.open("test2.html");
        }

    </script>
</head>
<body>
the first page !<br>
<input type="button" value="Jump to other page" onclick="jumpToOtherPage()">

</body>
</html>

点击跳转之后：

子页面定义：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="application/javascript">
        function showTheValue() {
            var show_window_param = document.getElementById("showWindowParam");
            show_window_param.innerText = localStorage.username;
        }
    </script>
</head>
<body>
<input type="button" value="show the value" onclick="showTheValue()">
<div id="showWindowParam" style="width:200px;height: 200px;"></div>
</body>
</html>

显示信息：

当然你关闭父窗口他也是存在的，唯一的缺点应该是清除缓存的时候也会清空跟cookieStorage很像，不同

就是扩展了cookiestorage的存储大小。

window使用之子窗口引用父窗口对象

1.需求

2.存储方式

2.2 window存储数据

2.3 localStorage保存数据

猜你喜欢