Skip to content
← Back to Community
Localstorage: Saving Data
Profile icon
Whacko

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.
cookie-example

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!
image
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.
image
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
Profile icon
NavyaChhikara
Profile icon
programmeruser
Profile icon
dudeactualdev
Profile icon
WilkerNogales
Profile icon
Kookiez
Profile icon
DavidNam3
Profile icon
TylerArmstrong2
Profile icon
angrydoge
Profile icon
OscarCruz_Alvar
Profile icon
Pankak
Comments
hotnewtop
Profile icon
realTronsi

local storage is not the same thing as a cookie...

for cookies you do

document.cookie
Profile icon
Whacko

@realTronsi You call this not a cookie?
image

Profile icon
realTronsi

@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.

Profile icon
realTronsi
Profile icon
Whacko

@realTronsi Well, it's still a cookie.

Profile icon
realTronsi

@JavaMaster1 no it is not. Shall we bring in the guy who literally has a cookie as his pfp @Coder100

Profile icon
realTronsi

@realTronsi Also since clearly my low cycles count makes me uncredible

Profile icon
Coder100

what is going on @realTronsi

Profile icon
realTronsi

@Coder100 my guy made a tutorial on localstorage thinking it is the same thing as cookies.

Profile icon
Coder100

nah localstorage ain't cookies @JavaMaster1

Profile icon
realTronsi

@JavaMaster1 also the cookie you see in use is from repl, not the one you created

Profile icon
Coder100

brooo localstorage != cookies like is there a local-storage header? or a set-local-storage header? smh my head @realTronsi

Profile icon
Coder100

ok 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

Profile icon
realTronsi

@Coder100 Go into inspect, click storage, then localstorage

Profile icon
Whacko

@realTronsi @Coder100 What in the darn world is going on? You guys are spamming my nonifications.

Profile icon
Coder100

ok well happy debating @realTronsi

Profile icon
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

Profile icon
Whacko

@realTronsi @Coder100 I really don't have the time to debate right now.

Profile icon
realTronsi

@JavaMaster1 I'm not here to debate wdym, I'm just saying cookies!=local-storage. You gotta check your facts man.

Profile icon
Whacko

@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.

Profile icon
realTronsi

@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

Profile icon
Coder100
Profile icon
Coder100

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

Profile icon
Whacko

@Coder100 Hmmmmmmmm...
But localStorage saves as cookies...

Profile icon
realTronsi

@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.

Profile icon
Whacko

@realTronsi Hmmmmmmmmmmmmmmmmmmmmmm...
Then why does it say this?
image

Profile icon
realTronsi

@JavaMaster1 That is a cookie by repl, you can open it and see its contents

Profile icon
Whacko

@realTronsi I know how to use cookies.

Profile icon
realTronsi

@JavaMaster1 before you doubt us, try googling it!

Profile icon
Whacko

@realTronsi Hmmmmmm....
But I still don't get why it saves in the cookie area...
image

Profile icon
realTronsi

@JavaMaster1 It doesn't, that is a cookie from repl. Try running the same code in localhost.

Profile icon
realTronsi

@JavaMaster1 Simply google "cookies vs local storage" or look at this: https://stackoverflow.com/questions/3220660/local-storage-vs-cookies

Profile icon
Whacko

@realTronsi I KNOW. I already did. But why does it show as a cookie? I have know document.cookie in my code.

Profile icon
realTronsi

@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.

Profile icon
Whacko

@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...

Profile icon
Whacko

@realTronsi That doesn't make sense...

Profile icon
realTronsi

@JavaMaster1 what doesn't make sense?

Profile icon
Whacko

@realTronsi You say it's not a cookie, but it shows as a cookie...

Profile icon
Coder100

localstorage does not save as cookies @JavaMaster1

Profile icon
Whacko

@Coder100
image
But I didn't add any cookies...

Profile icon
realTronsi

@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 clicking storage, then clicking localstorage

Profile icon
Whacko
Profile icon
Whacko

@realTronsi @Coder100 I updated the tutorial.

Profile icon
realTronsi

@JavaMaster1 You missed a few "cookies" but it's nice that you understand the concept now

Profile icon
Whacko
Profile icon
Whacko

@realTronsi There. Tell me if I missed any!

Profile icon
CursorsDev

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.

Profile icon
CursorsDev

I can't read. It was already resolved. :C

Profile icon
CursorsDev

Local storage is cool, do one about session storage next.

Profile icon
Whacko

@CursorsDev We already had that debate.

That's history.

Profile icon
DynamicSquid

Diiiiiiiiiiiiiiiiiiid someone sayyyyyyyyy

S Q U I D

Profile icon
Whacko
Profile icon
DynamicSquid

@JavaMaster1 Nice tutorial btw! Why are they called cookies though?

Profile icon
Whacko

@DynamicSquid Gotta fix that

Profile icon
Whacko
Profile icon
ComputingSquid

YES SQUIDS
What type of squid.
u know not all squids are 2 feet long.
some are longer than you.
@JavaMaster1

Profile icon
DynamicSquid

@ComputingSquid I'm a dynamic squid, we're dynamic in length

Profile icon
ComputingSquid

oh ok that makes sense. @DynamicSquid

Profile icon
dudeactualdev

Here's an easier version

Profile icon
retronbv

Now, we just finished! See how easy cookies are to use?

Making localstorage is quite simple, like this:
Change this to setting?

REMBER
slpleing?

Profile icon
potatojs

in our school, we are 20 potatoes apart!

Profile icon
Whacko

@potatojs :)

Spoiler alert: I'll add that to my next tutorial.
Profile icon
potatojs
Profile icon
Whacko
Profile icon
zplusfour

Cool!
Very well explained!

Profile icon
Whacko

@ZDev1 Thanks so much!

Profile icon
zplusfour

@JavaMaster1 np so much!

Profile icon
ThisUserTaken

neat

Profile icon
Whacko

@ThisUserTaken Thank you!

Profile icon
Pizzaz4me

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

Profile icon
Whacko

@PlaySoccer We're having a debate here.

Profile icon
Pizzaz4me

Yes I saw it in the [email protected]

Profile icon
potatojs

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

Profile icon
Spacecraft

@PlaySoccer Did you delete your earlier posts from the Ask board? It seems to have disappeared from my comment history.

Profile icon
Pizzaz4me

Yes I accidently deleted one. But you still got the 5 upvotes from answering the question [email protected]