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 six feet apart three squids apart 50 lines of code apart whatever.
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.
@CursorsDev We already had that debate.
That's history.
@JavaMaster1 Nice tutorial btw! Why are they called cookies though?
@DynamicSquid Gotta fix that
@DynamicSquid There!
YES SQUIDS
What type of squid.
u know not all squids are 2 feet long.
some are longer than you.
@JavaMaster1
@ComputingSquid I'm a dynamic squid, we're dynamic in length
oh ok that makes sense. @DynamicSquid
Here's an easier version
Now, we just finished! See how easy cookies are to use?
Making localstorage is quite simple, like this:
Change this to setting?
REMBER
slpleing?
Cool!
Very well explained!
@JavaMaster1 np so much!
neat
@ThisUserTaken Thank you!
Local Storage or cookies, I am not good enough at JS to figure out (After reading the debate in the chat I still didn't figure out). But this still looks like a good tutorial
@PlaySoccer We're having a debate here.
Yes I saw it in the [email protected]
sooo if you are using some back-end like node.js: cookies because you can assign/read them directly from the server
else if you are working just on a front-end app or website.. i think local storage is better because it's easier and more clear to work with and can store more data @PlaySoccer
@PlaySoccer Did you delete your earlier posts from the Ask board? It seems to have disappeared from my comment history.
Yes I accidently deleted one. But you still got the 5 upvotes from answering the question [email protected]
local storage is not the same thing as a cookie...
for cookies you do
@realTronsi You call this not a cookie?

@JavaMaster1 no, but that is not what you're defining here. You're using
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.@JavaMaster1 https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie
@realTronsi Well, it's still a cookie.
@JavaMaster1 no it is not. Shall we bring in the guy who literally has a cookie as his pfp @Coder100
@realTronsi Also since clearly my low cycles count makes me uncredible
what is going on @realTronsi
@Coder100 my guy made a tutorial on localstorage thinking it is the same thing as cookies.
nah localstorage ain't cookies @JavaMaster1
@JavaMaster1 also the cookie you see in use is from repl, not the one you created
brooo localstorage != cookies like is there a
local-storage
header? or aset-local-storage
header? smh my head @realTronsiok 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. @realTronsi
@Coder100 Go into inspect, click storage, then localstorage
@realTronsi @Coder100 What in the darn world is going on? You guys are spamming my nonifications.
ok well happy debating @realTronsi
@Coder100 no but they're just different things. Besides I'm just stalking in talk atm, I was just trying to resolve some misinformation
@realTronsi @Coder100 I really don't have the time to debate right now.
@JavaMaster1 I'm not here to debate wdym, I'm just saying
cookies!=local-storage
. You gotta check your facts man.@realTronsi And I never really wanted to debate. You just stated something, and then @Coder100 came in and it seams like we are grown-ups in a court and @Coder100 is our judge.
@JavaMaster1 bruh we aren't debating, I'm just correcting some misinformation. You should look up the differences between localstorage and cookies. This was a good tutorial, but you just got some terms mixed up
lololol @JavaMaster1
well @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 computer
@Coder100 Hmmmmmmmm...
But localStorage saves as cookies...
@JavaMaster1 @Coder100 no localStorage and cookies are not saved in the same place or related. Cookies are accessible via the backend, while localStorage is stored locally on your browser, and backends can't even access it.
@realTronsi Hmmmmmmmmmmmmmmmmmmmmmm...

Then why does it say this?
@JavaMaster1 That is a cookie by repl, you can open it and see its contents
@realTronsi I know how to use cookies.
@JavaMaster1 before you doubt us, try googling it!
@realTronsi Hmmmmmm....

But I still don't get why it saves in the cookie area...
@JavaMaster1 It doesn't, that is a cookie from repl. Try running the same code in localhost.
@JavaMaster1 Simply google "cookies vs local storage" or look at this: https://stackoverflow.com/questions/3220660/local-storage-vs-cookies
@realTronsi I KNOW. I already did. But why does it show as a cookie? I have know
document.cookie
in my code.@JavaMaster1 It doesn't who as a cookie if you use local storage! Open the cookie contents and you will see what I mean. You can put the code in a text editor and open it on localhost, and you won't see any cookies.
@realTronsi I know it won't... hmmmmmmmmmmm...
I'm starting to understand the concept here, but I still can't get why they would show it as a cookie...
@realTronsi That doesn't make sense...
@JavaMaster1 what doesn't make sense?
@realTronsi You say it's not a cookie, but it shows as a cookie...
localstorage does not save as cookies @JavaMaster1
@Coder100

But I didn't add any cookies...
@JavaMaster1 it does not show as a cookie. Did you read my previous comments? The cookie you're seeing is one that repl automatically added. It is not the "cookie" that you created. You simply added data to localstorage, which you can find by opening inspect(developer tools
f12
), then clickingstorage
, then clickinglocalstorage
@realTronsi ok
@realTronsi @Coder100 I updated the tutorial.
@JavaMaster1 You missed a few "cookies" but it's nice that you understand the concept now
@realTronsi :)
@realTronsi There. Tell me if I missed any!