如何重定向到 HTML 页面并引入附加数据？答案

【问题标题】：How do I redirect to an HTML page and bring in attached data?如何重定向到 HTML 页面并引入附加数据？
【发布时间】：2016-02-16 22:08:09
【问题描述】：

所以我试图从我的登录页面重定向到仪表板，我需要在重定向时引入一些变量，例如 ID 等。我不能使用 MVC 或 .Net 结构，所以我不知道当我重定向时我将如何引入数据，以便在整个移动应用程序中使用其他 API 调用。请问有人吗？

      self.LoadCustomer = function (data)
        Bring 'data' in the redirect....
        window.location = "Layout.html";
    }

【问题讨论】：

您永远不要“携带”密码，尤其是纯文本密码！仅将散列和加盐密码与数据库中的对应密码进行比较。否则，其余信息可以作为 URL 查询参数的一部分传递。
是的，这是一个巨大的安全漏洞。你需要一个可靠的后端技术，比如 .net 或 php 或类似的东西来做你想做的事情。
同意特里。您应该针对用户进行验证，并随身携带一个可以过期并在注销时被删除的会话，而不是到处携带密码。
哈哈，好吧好吧，伙计们冷静一下。 1. 我们通常使用会话，但我们不能使用这个新应用程序。 2. 我们所有的信息都经过高度加密，我真正想要的是我们使用的 ID。 3. 我正在使用 API 从我们的其他 ASP.NET MVC4 应用程序登录它们。但我不能像其他应用程序一样设置这个应用程序并使用 MVC，所以我需要找到另一种方法。 ;)

标签： javascript jquery html api redirect

【解决方案1】：

永远不要存储密码！！！没有必要，应该始终检查它们，而不是存储某种类型的过期信息。

我喜欢使用这个库：JS-Cookie

它允许您存储和检索本地数据：

在第一页设置cookie：

self.LoadCustomer = function (data) {
   Cookies.set('data', data)
}

继续阅读：

Cookies.get('data'); //String of data
Cookies.getJSON('data'); //Object literal of data

【讨论】：

【解决方案2】：

你可以使用 sessionStorage 来达到想要的效果。我假设数据是一个 JSON 对象。

self.LoadCustomer = function (data) {
    //store the data in sessionStorage
    sessionStorage.setItem("data", JSON.stringify(data) );
    window.location = "Layout.html";
}

然后在 Layout.html 中，您可以使用 sessioStorage 将值读回。

//read the data
var data = JSON.parse( sessionStorage.getItem("data") );

正如其他人所评论的那样，请注意存储密码的安全隐患。尽可能使用会话密钥。

【讨论】：

【解决方案3】：

这是在window.location 上传递值的一种非常简单且非常愚蠢的方式，有点像GET 参数：

index.html

<body>
    <script type="text/javascript" charset="utf-8">

    window.setTimeout(function(){
        var obj = {
            param1:"value",
            param2:"value"
        };
        window.location="layout.html#" + JSON.stringify(obj);
    },3000);

    </script>
</body>

layout.html

<body onload="read()">
    <script type="text/javascript" charset="utf-8">
        function read(){
            console.log(JSON.parse(window.location.hash.replace('#','')));
        }
    </script>
</body>

考虑到更好的替代方案（本地存储、cookie、SPA 框架或服务器技术），这是非常不明智的做法，但它会起作用。（这并没有说太多，因为你可以用 JS 做很多可怕的废话）。认为它是一种新事物。

如果您确实需要管理安全性，则需要实现某种类型的服务器端会话逻辑，否则您的裤子完全没落。

【讨论】：

【解决方案4】：

当我需要将数据传递到另一个页面时，我使用一些 JavaScript 来：

创建一个表单元素，
向表单添加一个命名的输入元素，
将数据转换为 JSON 并存储在输入中，
通过邮寄方式将表单提交到新页面。

这是我的辅助函数：

function submitJSON( path, data, postName ) {
    // convert data to JSON
    var dataJSON = JSON.stringify(data);

    // create the form
    var form = document.createElement('form');
    form.setAttribute('method', 'post');
    form.setAttribute('action', path);

    // create hidden input containing JSON and add to form
    var hiddenField = document.createElement("input");
    hiddenField.setAttribute("type", "hidden");
    hiddenField.setAttribute("name", postName);
    hiddenField.setAttribute("value", dataJSON);
    form.appendChild(hiddenField);

    // add form to body and submit
    document.body.appendChild(form);
    form.submit();
}

像这样使用它：

var myData = {param1: 1, param2: 2);
var myPath = "path_to_next_page.html";
submitJSON( myPath, myData, 'myPostName' );

像这样检索下一页上的数据：

<?php
    $postVarsJSON = $_POST['myPostName'];
    $myData = json_decode( $postVarsJSON );
?>

或者在 JavaScript 中：

var myData = JSON.parse( <?php $_POST['myPostName']; ?>);

【讨论】：

我认为这个想法是 OP 想要在没有服务器端逻辑的情况下执行此操作。
@Bosworth99 猜猜我错过了 OP 隐含的“无服务器端逻辑”限制。考虑到这个限制，我推荐localStorage 或sessionStorage（但不推荐cookie——对性能的影响太大）。
@terrymorse 您是否有任何链接来支持您的“非 cookie”声明？有兴趣看到您谈论的性能。此外，cookie 增加了被客户端和服务器修改的杠杆作用。
Cookie 总是在页面的 HTTP 标头中发送，在客户端和服务器之间来回发送。如果您只在本地使用数据，则没有理由使用 cookie。他们将浪费带宽并减慢页面加载时间。更多详情：stackoverflow.com/questions/3220660/local-storage-vs-cookies>.
@VinnyMannelo 在cookies, localStorage, and sessionStorage 之间进行选择时，这里是对问题的更好回顾