Skip to content
Sign upLog in
← 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

@JavaMaster1
https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie

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

lololol

@JavaMaster1

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

@realTronsi
ok

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

@realTronsi
:)

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

XD

@DynamicSquid

Profile icon
DynamicSquid

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

Profile icon
Whacko

@DynamicSquid
Gotta fix that

Profile icon
Whacko

@DynamicSquid
There!

Profile icon
ComputingSquid

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


@JavaMaster1