将帖子重定向到其他页面

Question

I'm writing a simple diary application and I'd like the user to input the entry on one page and have some js script take that entry and collect it into a different page ("diary-posts").我正在编写一个简单的日记应用程序，我希望用户在一个页面上输入条目，并让一些 js 脚本获取该条目并将其收集到不同的页面（“日记帖子”）。 With the code below I can only collect posts within the same page however:但是，使用下面的代码，我只能收集同一页面内的帖子：

<! DOCTYPE html>
<html lang="en">

<body>
    <header class="text-center">
        <h2>
            Diary Posts
        </h2>
    </header>
    <div class="wrapper text-center">
        <textarea id="txt" rows="3" placeholder="How's your day?"></textarea>
        <div class="text-l">
        <button onclick="getRs()">Create</button>
    </div>
    <div id="rs" class="wrapper"></div>
    <script src="diary-script.js"></script>
</body>
</html>

function _(id){
    return document.getElementById(id)
}

function getRs() {
    let txt = _('txt').value
    const d = new Date()

    _('rs').innerHTML += `<div class="card"><p>${txt}</p>
    <small>${d.toLocaleTimeString()}, ${d.toLocaleDateString()}</small></div>`
}

How can I modify this in a simple way to achieve what I want?如何以简单的方式修改它以实现我想要的？

Answer 1

There is a lot of ways but I recommend you these options.有很多方法，但我向您推荐这些选项。 Choose the best one that works for you.选择最适合您的一种。

1. Cookie 1. 饼干

This option is best if you want it to use in backend too, because you send cookies data to the backend by every requests.如果您也希望在后端使用此选项，则此选项是最佳选择，因为您每次请求都会向后端发送 cookie 数据。 so the data must NOT be too large and must be needed in the backend.所以数据不能太大，并且必须在后端需要。 otherwise you should use the "localStorage".否则你应该使用“localStorage”。

function setCookie(cname, cvalue, exdays) {
  const d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  let expires = "expires="+ d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
  let name = cname + "=";
  let decodedCookie = decodeURIComponent(document.cookie);
  let ca = decodedCookie.split(';');
  for(let i = 0; i <ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

setCookie("name", value, 1) //set the cookie for 1 day

getCookie("name") //get the cookie everywhere you want

2. localStorage 2.本地存储

If you want to use it only in the user device, this is the option you wanna pick.如果您只想在用户设备中使用它，这是您想要选择的选项。

note: localStorage stores the data with no expiration date.注意：localStorage 存储的数据没有过期日期。 the data will never ever will be deleted automatically unless you delete it or the user delete it by browser settings.除非您将其删除或用户通过浏览器设置将其删除，否则数据永远不会被自动删除。

localStorage.setItem("fieldName", data); //set the item
localStorage.getItem("fieldName"); //get the item

3. sessionStorage (recommended) 3. sessionStorage （推荐）

sessionStorage is similar to localStorage but the difference is that this will be deleted when user close the browser. sessionStorage 与 localStorage 类似，但不同的是它会在用户关闭浏览器时被删除。 so if the data is not so much important and you don't need it next time the user visits the page, this option is made for you.因此，如果数据不是那么重要，并且下次用户访问该页面时您不需要它，那么此选项就是为您准备的。

sessionStorage.setItem("fieldName", data); //set the data
sessionStorage.getItem("fieldName"); // get the data

4. Use backend 4. 使用后端

you can also store the data in database via backend.您还可以通过后端将数据存储在数据库中。 you can use an API to send the data to the backend.您可以使用 API 将数据发送到后端。 this option is good for when you need the data in backend and you always need it.当您需要后端数据并且您总是需要它时，此选项非常有用。

将帖子重定向到其他页面

问题描述

1 个解决方案

解决方案1
1 已采纳 2021-07-21 15:20:43

将帖子重定向到其他页面

问题描述

1 个解决方案

解决方案1 1 已采纳 2021-07-21 15:20:43

解决方案1
1 已采纳 2021-07-21 15:20:43