0

I need to save text within an textarea with localStorage.

Here is the HTML code:

.textarea {
  background: none;
  color: lime;
  font-size: 1.25rem;
  border: 0px;
  width: 100%;
  height: 100vh;
  display: inline-block;
  outline: none;
  resize: none;
  text-align: center;
}
<textarea class="textarea" id="notes" value="Type something!">
Delete this and start typing!</textarea>

How can I save the text locally? Searches did not get me anywhere.

LegitCoder
  • 17
  • 5
  • Why a cookie and not local storage? This problem doesn't seem like it needs to be using cookies. – Samathingamajig Nov 17 '20 at 23:11
  • By local storage do you mean file? – LegitCoder Nov 17 '20 at 23:11
  • No, I mean [local storage](https://medium.com/@krishankantsinghal/local-storage-vs-session-storage-vs-cookie-22655ff75a8) ||| [Here too](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) – Samathingamajig Nov 17 '20 at 23:13
  • Ok, can you show me what it would look like? – LegitCoder Nov 17 '20 at 23:13
  • 1
    Does this answer your question? [How do I create and read a value from cookie?](https://stackoverflow.com/questions/4825683/how-do-i-create-and-read-a-value-from-cookie) – Ergis Nov 17 '20 at 23:16
  • `"Ok, can you show me what it would look like?"` I did, @LegitCoder, look at the second link that i sent in the previous message – Samathingamajig Nov 17 '20 at 23:17
  • Ok, so I have ```function saveLocal(){var text = document.getElementById("notes").value; localStorage.setItem('text', text); }``` How do I retrieve it on a load and put it inside the textare? – LegitCoder Nov 17 '20 at 23:19

3 Answers3

1

It sounds like localStorage is a better option for your use case.

That said, you can get your textarea value with:

document.getElementById("notes").value

After that, as you can see in this answer, you can use

function createCookie(name, value, days) {
    var expires;
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toGMTString();
    }
    else {
        expires = "";
    }
    document.cookie = name + "=" + value + expires + "; path=/";
}

So to summarize, you can create your cookie with something like the following:

let value = document.getElementById("notes").value;
createCookie('textareaValue', value, 0);

UPDATE

Since you updated your question to only use localStorage, you can use this:

let value = document.getElementById("notes").value;
localStorage.setItem("textareaValue", value);

You can retrieve and display the value with:

let value = localStorage.getItem('textareaValue');
document.getElementById("notes").value = value;
anpel
  • 931
  • 6
  • 16
0

I assume, you just want to modify document.cookie by hand:

document.cookie = "mytext=stuff"
// this will add "mytext" key to page cookies and assign "stuff"

document.cookie = "mytext=newstuff"
// this will modify your key, cookies works just like associative array

document.cookies = "mytext=;max-age=0"
// this will delete your cookie by setting its max age to 0, so cookie is being considered expired now

Stack Overflow has a nice thread on this topic: How to get and set cookies in JavaScript.

In order to grab the text from your <textarea> you might want to use my_html_element.value, where my_html_element is HTML node.

Also the following syntax might be useful:

let variable = "some text";
`string${variable}` // stringsome text
Paul Lynn
  • 101
  • 11
0

Assuming you are using Javascript with your html, here is already something that is available on stack overflow:

See here

mdzahedhossain
  • 125
  • 1
  • 14