如何在多页 Web 应用程序中发送服务器数据？答案

【问题标题】：how send server data in a multi page web application?如何在多页 Web 应用程序中发送服务器数据？
【发布时间】：2020-06-05 10:21:07
【问题描述】：

这些天我做了一个标准的主页、一个登录页面和一个用户信息页面。在我使用方法 POST 和 Ajax(Fetch) 的登录页面中，我将电子邮件和密码发送到服务器，服务器使用属于该电子邮件的用户信息响应正确的 json。但我不知道 JSON 中的用户信息如何在另一个 HTML 文档（如用户信息页面）中使用。我尝试了很多东西，但没有任何帮助。

form.addEventListener('submit',(e)=>{

e.preventDefault();

    const data={}

    data1.correo=email.value;
    data1.contrasenia=password.value;


        const miinit={
        method:'POST',                    
        headers: {"Content-type":"application/json"},
        body:JSON.stringify(data1)}

        const url='https://localhost:44351/api/login';

        const myrequest =new Request(url,miinit)

    const requestpost=()=>{

        fetch(myrequest).then(response=>{console.log(response);return response.json()}).then(response=>{console.log(response)})
    }    

    requestpost()
})

【问题讨论】：

只是一个猜测，但 SO está también en español o portugues, pt.stackoverflow.com es.stackoverflow.com
你不知道如何在另一个 html 文档中使用 JSON 数据是什么意思？是否需要访问另一个页面的 DOM 并更新与用户信息相关的元素的属性？

标签： javascript html json dom fetch

【解决方案1】：

我假设您在没有任何库或任何东西的情况下完成这一切。话虽如此，我假设每个页面转换都将是一个完整的页面刷新。这意味着 API 返回的对象仅与登录页面的生命周期一样好。

您有两个适用于您的设置的选项：

使用localStorage 存储当前用户 JSON 负载。

const payload = { userId: 1, name: 'Test' };
// The item being saved to localStorage must be
// a string. You serialize/deserialize as your
// set/get if need be.
localStorage.setItem('currentUser', JSON.stringify(payload));

// On some other page, calling localStorage.getItem
// will give you the object
console.log(localStorage.getItem('currentUser'));

假设您可以控制后端代码并且有可用的会话，请创建一个返回当前用户对象的新 API 方法。您可以在每个页面上调用 getCurrentUser 方法，这将返回该登录用户。

这两个选项都有需要考虑的安全点，但这不是这个问题的主题。我认为对您而言，最简单的选择是将对象保存到本地存储，但我不建议将其用于生产设置。如果您正在尝试做一些可用于生产的事情，我建议您查看 JWT 身份验证。

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

https://jwt.io/introduction/

【讨论】：

谢谢，还有一个问题。为什么不建议将本地存储用于生产设置？

【解决方案2】：

如果您想在多个页面中使用从服务器返回的信息，则必须将其存储在 LocalStorage 或其他持久性 API 中。数据不跨页面共享。

【讨论】：