Redirecting post to a different page

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"). 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

This option is best if you want it to use in backend too, because you send cookies data to the backend by every requests. so the data must NOT be too large and must be needed in the backend. otherwise you should use the "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

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. 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)

sessionStorage is similar to localStorage but the difference is that this will be deleted when user close the browser. 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

you can also store the data in database via backend. you can use an API to send the data to the backend. this option is good for when you need the data in backend and you always need it.

Redirecting post to a different page

Question

1 answers

solution1
1 ACCPTED 2021-07-21 15:20:43

Redirecting post to a different page

Question

1 answers

solution1 1 ACCPTED 2021-07-21 15:20:43

solution1
1 ACCPTED 2021-07-21 15:20:43