How to save some text entered into a contenteditable div, so that it reappears on the HTML when relo-CodePudding

I can't figure out how I can save some text in a div which has 'ContentEditable="true"'set?

Basically, I am very naive at coding HTML and CSS and JS is way out of my league. However, I have managed to make some sort of a day planner for myself using HTML and CSS.

The problem is that, I don't know how to make the text that I put into a div in HTML (with contenteditable set to true) to remain and appear the next time I turn on the html file on a browser.

I am going to use my application only in localhost and don't want to use any sort of database.

Looking forward to you guys' expertise and kind help. Required information is given below--

.quote
{
    width: 92%;
    height: 48vh;
    margin: 2% auto auto auto;
    background-color: beige;
    border-style: solid;
    border-width: 12px;
    border-color: aqua;
    display: grid;
    grid-template-rows: 12% auto;
}

.quote .p
{
    height: 100%;
    margin:0 auto auto 12px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12vh;
    background-image: linear-gradient(180deg, rgba(26,18,189,1) 51%, rgba(43,181,131,1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.quote .p p
{
    height: 100%;
    width: 100%;
    margin:0;
}

.quote .writetext
{
    min-height: 8vmax;
    max-height: 19vmax;
    width: 25.6vmax;
    margin: 12px auto 12px auto;
    border-style: solid;
    border-width: 2px;
    border-color: white;

    font-family: 'Patrick Hand', cursive;
    font-size: 4vh;
    text-align: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DayMaker- Welcome</title>
    <link rel="stylesheet" href="styles.css">
    <script src="scripts.js"></script>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Patrick Hand&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@-1,600&display=swap" rel="stylesheet">
</head>
<body>
     <div >
          <div ><p>"</p></div>
          <div  contenteditable="true">
          </div>
     </div>
</body>
</html>

NOTE: The given code snippets are part of a larger project. So, please ignore the graphical discrepancies.

This is a pic of the project I'm working on:-WE need to fix that box at bottom right

I tried to search for solution a lot on the web but couldn't find any. Sincerely looking forward to your help.

CodePudding user response：

You need a database there is no way I know of to do it without the data base if you are having trouble with SQL you can use excel otherwise I do not have a solution except use a database

CodePudding user response：

Will this work? It uses a textarea element instead of div with conteneditable=true. Since you don't have a database it stores the text in localstorage and retrieves from it on page reload.

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

<head>
  <meta charset="UTF-8">
  <title>DayMaker- Welcome</title>
  <link rel="stylesheet" href="styles.css">
  <script src="scripts.js"></script>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Patrick Hand&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@-1,600&display=swap" rel="stylesheet">

  <style>
    #writetext {
      resize: none;
      background-color: inherit;
    }

  </style>
</head>

<body>
  <div >
    <div >
      <p>"</p>
    </div>
    <textarea id="writetext" ></textarea>
  </div>
  <script>
    const textarea = document.querySelector('#writetext');
    textarea.value = localStorage.getItem('writetext');

    textarea.addEventListener('change', () => {
      localStorage.setItem('writetext', textarea.value);
    })
  </script>
</body>

</html>

Since there is no submit button you will have to lose focus from the textarea to save the text.