Localstorage: Saving Data
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
Bye!
I see some people debating whether cookies are localStorage or the other way around. As a web developer that has used local storage a ton, I can say for sure that local storage is far different from cookies. Cookies can store up to 4kB. Local storage is shared between all sites. For example, if I have a site that stores something with a key of "hello world", another site can simply use the same key and see what the other site is doing. Local storage and cookies are both vulnerable to XSS, but local storage is far easier to attack. The cookie you see in your screenshot is from repl.it. And yes, local storage can only be used on the client side.
I can't read. It was already resolved. :C
Local storage is cool, do one about session storage next.
That's history.
YES SQUIDS
What type of squid.
u know not all squids are 2 feet long.
some are longer than you.
@JavaMaster1
local storage is not the same thing as a cookie...
for cookies you do
localStorage, which is only accessible via client side, but offers more versatility. They are different things, and you can look up the difference between them.what is going on
@realTronsinah localstorage ain't cookies
@JavaMaster1brooo localstorage != cookies like is there a
@realTronsilocal-storageheader? or aset-local-storageheader? smh my headok looking at your debate your rebuttal was very weak and so was your attack. You could have resolved this in one go by saying backend cannot set localstorage and so therefore it is not a real implementation of cookies.
@realTronsiok well happy debating
@realTronsicookies!=local-storage. You gotta check your facts man.lololol
@JavaMaster1well
@JavaMaster1, just fyi in the future, localStorage isn't cookies at all, cookies are saved inside headers and localStorage is stored, well, locally on your computerBut localStorage saves as cookies...
Then why does it say this?
But I still don't get why it saves in the cookie area...
document.cookiein my code.I'm starting to understand the concept here, but I still can't get why they would show it as a cookie...
localstorage does not save as cookies
@JavaMaster1But I didn't add any cookies...
f12), then clickingstorage, then clickinglocalstorage