Localstorage: Saving Data

Sup, everybody!
School's been crazy lately, wearing masks and staying six feet apart, or three squids apart, or 50 lines of code apart, or, well, you get the point.
This tutorial will teach you about the marvelous localstorage and how to use them!

Let's speed through your questions.

What is localstorage?
Localstorage in coding are ways to store information, but not on a server. It is very good and easy to use, and it's easy to learn.
Localstorage is very useful in a lot of situations.

Why do we need localstorage?
Localstorage is very important, because if not you can go on a website, do something, and it won't save*.

*Unless there is a database or cloud or cookies on the site.

Now, we will learn how to make localstorage.

Making and Getting Localstorage

Making localstorage is quite simple, like this:

var data = localStorage.getItem('dataName');

Changing localstorage are quite simple, too:

localStorage.setItem('dataName', 'value');

REMBER: This will not work on a node.js repl.
See? Simple.
I quickly just sped right through that.

BONUS: Making Something With Localstorage!

We're gonna make a text box.
Not just any text box-
A text box that saves data.

As shown in the image above.

First, we'll make a HTML, CSS, JS repl.
We'll make the text box in our <body>, like this:

<textarea placeholder="Change this text, reload the page, and the text will stay the same!" id="text"></textarea>

The placeholder is for the placeholder, and we need the id to get the element.
Then we need the button that updates the localstorage:

<button onclick="change()">Change</button>

Now here's where JavaScript comes in!
We'll make our localstorage:

var note = localStorage.getItem('note');

Now, we'll make the function that updates the data:

function change() {
  var text = document.getElementById("text");
  localStorage.setItem('note', text.value);
};

Then we will need to set the text area to the value of the localstorage. Add this under your var.

document.getElementById("text").value = note;

Now, we just finished! See how easy cookies are to use?
Before we go, let's style things up in our style.css:

body {
  text-align: center;
  margin: 0;
}
textarea {
  width: 100%;
  height: 100%;
}
button {
  cursor: pointer;
}

PERFECT!

Now, change the text and press the button. Then, reload the page.
The text stays the same!
Using localstorage!
You can press the little lock button to see.

Woo-hoo!
I hope you enjoy using this tutorial, have fun, wear masks, and stay ~~six feet apart~~ ~~three squids apart~~ ~~50 lines of code apart~~ whatever.
Bye!

Voters

Localstorage: Saving Data

Localstorage: Saving Data.css-1q3m8ps{margin-left:var(--space-4);margin-right:var(--space-4);display:none;}

*Unless there is a database or cloud or cookies on the site.

Making and Getting Localstorage.css-1q3m8ps{margin-left:var(--space-4);margin-right:var(--space-4);display:none;}

BONUS: Making Something With Localstorage!

As shown in the image above.

Comments

S Q U I D.css-1q3m8ps{margin-left:var(--space-4);margin-right:var(--space-4);display:none;}

Spoiler alert: I'll add that to my next tutorial.

Localstorage: Saving Data

Making and Getting Localstorage

S Q U I D