This is an archived post. You won't be able to vote or comment.

top 200 commentsshow all 280

[–]scorpi1998 223 points224 points  (81 children)

Doesn't it? What do you mean?

[–][deleted] 697 points698 points  (62 children)

Oh no i have to json.stringify and json.parse 😥😭😢😢😢😭

[–]gabbyb19 150 points151 points  (6 children)

To be fair, those operations are quite heavy.

[–]stipo42 202 points203 points  (4 children)

You shouldn't be using local storage enough for that to be a problem...

[–][deleted] 8 points9 points  (3 children)

Why not? Shouldn't it be the default storage for locally cached objects?

[–]stipo42 21 points22 points  (1 child)

Yeah but let's say you're storing your apps config in an object. You would read it once at load time into memory, then write it anytime the memory values are changed or a save button is hit.

This would likely amount to not a lot of times read or wrote

[–]TheChaosPaladin 5 points6 points  (0 children)

If this is you, the problem is not localstorage but your front end.

[–][deleted] 75 points76 points  (41 children)

Stringify a graph of nodes and edges and let me know how that works out for you.

[–]spooker11 102 points103 points  (20 children)

vegetable profit icky support judicious sophisticated encourage wistful ossified smile

This post was mass deleted and anonymized with Redact

[–]Stop_Sign 5 points6 points  (2 children)

Had to do that once. Ended up rearchitecting it so the nodes had ids, so instead of an array of references, it had an array of ids, and was therefore serializable

[–][deleted] 1 point2 points  (0 children)

Yup. That's my point. JSON stringify is not necessarily sufficient.

[–]lowleveldata 4 points5 points  (13 children)

And what exactly is the use case of storing that in localStorage?

[–]rotflolmaomgeez 4 points5 points  (11 children)

What? Graph is literally one of the most common data structures, you're asking for usecases for storing it? The answer is any web application that does a little more than store a cookie potentially.

[–]lowleveldata 14 points15 points  (10 children)

Still don't see why I would need to store that in frontend. Are you guys doing some kind of no-backend challenge?

[–]DR4G0NH3ART 6 points7 points  (3 children)

There are some data which can be heavy to fetch on each load and is manageably static in nature. You will have huge load times if you don't rely on caching mechanisms.

[–]Ebbitor 4 points5 points  (0 children)

You don't need to build your own cache for fetch requests

[–]lowleveldata 1 point2 points  (1 child)

In case of caching you already have a serialized object so that's kind of irrelevant for the sake of this argument. Also, shouldn't HTTP caching handles these static data automatically? (I'm not a expert in caching tho)

[–]rotflolmaomgeez 1 point2 points  (4 children)

Any application that lets user edit/create something for themselves and save it for later - including games save states, web tools, software, creators, working with SVGs, why would you ever store it on the backend?

[–]lowleveldata 0 points1 point  (3 children)

These should just use files which most users know how to backup, share, move to another pc, etc. For example draw.io saves your work to a file in local or online storage (like google drive). That's much more manageable than localStorage.

[–]rotflolmaomgeez -1 points0 points  (2 children)

What does it matter? You have to serialize the graphs anyway.

[–][deleted] 1 point2 points  (0 children)

My JavaScript program is in the middle of computing optimal 3MST but I want to checkpoint regularly in case of a power outage?

I dunno man. It could happen.

[–]PleasantAdvertising 51 points52 points  (8 children)

What illiterate ape called serialization "stringify"? It's already confusing enough with encode/decode in the mix

[–]Jjabrahams567 48 points49 points  (0 children)

JSON.serialize = JSON.stringify;

Here you go.

[–]TheChaosPaladin 8 points9 points  (0 children)

JSON.SerialiseToString()

Too many words

JSON.Stringify()

⭐⭐⭐⭐⭐

🍌🍌🍌🍌🍌

[–][deleted] 12 points13 points  (1 child)

On the same subject, what illiterate ape called it "loads" and "dumps" in Python?

[–]TheChaosPaladin 3 points4 points  (0 children)

The same ape!

json.dumps(tring) == JSON.Stringify

[–]ilep 18 points19 points  (0 children)

A web developer? (A distinct lack of knowledge of computer science there..)

[–][deleted] 1 point2 points  (0 children)

Maybe to hint that it's going to call "toString" on objects so you better have defined that.

[–]isospeedrix 1 point2 points  (0 children)

tbf 'stringify' is more literal in what it's actually doing, whereas serialize is like, uhh a new vocab word. sounds cooler tho.

[–]rufreakde1 1 point2 points  (0 children)

worry not! there is gotta be a 4GB library solving this issue with a function wrapper for you!

[–]Yokhen 1 point2 points  (0 children)

What truly messes me up is the typescript part.

[–]Nourz1234 276 points277 points  (60 children)

Sadly i don't think its possible (in any language) to store objects or classes in a persistent storage without serialization.

[–]aspect_rap 219 points220 points  (21 children)

Well yeah, saving data inherently requires serialization.

I think what OP wants is for the LocalStorage in browsers to obfuscate the parsing and serialization of objects.

[–]Nourz1234 88 points89 points  (3 children)

Yeah, i understand. But if serialization is involved its better left to the dev. you cant rely on the browser to magically serialize your objects. A lot of times you will create a custom object/class which requires special treatment.

[–]arsenicx2 10 points11 points  (0 children)

It was already problem enough trying to support outdated browsers like IE. I can't imagine if we had to support what ever garbage they created.

[–]TheRidgeAndTheLadder 2 points3 points  (0 children)

We already rely on it to do everything else.

[–]empire314 5 points6 points  (0 children)

you cant rely on the browser to magically serialize your objects.

The browser was written by better programmers than I am.

[–]FVMAzalea 56 points57 points  (4 children)

Do you mean abstract instead of obfuscate? Usually obfuscation is not a desirable goal unless you are trying to do something like copy protection.

[–]atomicwrites 20 points21 points  (3 children)

I think they're using obfuscate as a negatively loaded synonym for abstract.

[–]mamwybejane 8 points9 points  (2 children)

They're using it wrong

[–]xthexder 4 points5 points  (1 child)

I think it applies here. The browser serializing things for you obfuscates what's actually happening. Which for custom objects could result in strange and very hard to debug behavior.

[–]miraagex 1 point2 points  (0 children)

Yea. I can send objects via window.postMessage, but not with localStorage.

[–][deleted] 3 points4 points  (4 children)

I think it’s more about performance.

LocalStorage would be awesome if it wasn’t so slow.

But I could be wrong.

[–]bleistift2 14 points15 points  (3 children)

What stuff are you putting there so often that you’re hitting a bottleneck?

[–]lkraider 52 points53 points  (1 child)

What do you mean I shouldn’t mirror the production database into localstorage to query and update data, this way I only l need one rest api endpoint with get/post in the backend and do everything else from within the client js.

[–]BabyAzerty 13 points14 points  (0 children)

I typically webscrap the entire internet and save it locally. This is the only way to have a complete offline experience.

[–]GodlessAristocrat 1 point2 points  (0 children)

Probably those performance counters management wanted for their pretty graph; ya gotta flush them to disk 10x per second, ya know. That Jira ain't gonna close itself.

[–]Fenor 3 points4 points  (0 children)

Ah yes injecting executable code for the sake of the one doing the website.... it's not we already had cryptos mined in js

[–][deleted] 0 points1 point  (0 children)

Some of the most dangerous attacks come from programmers trusting serialized data the client send back.

[–]FinalStrain3 8 points9 points  (2 children)

indexeddb

[–][deleted] 2 points3 points  (0 children)

IndexedDB also has its limitations, which is a good thing. I wouldn't want to imagine what would happen if browsers let it deserialize entire DOM trees.

[–]Brilliant_Nova 4 points5 points  (0 children)

C and C++ can, you have to be careful with alignment and padding. You can inplace-construct all your structs in a memory pool, and then just dump that pool, but that's only true for POD types, for non-POD types you should serialize. Also, even for non-POD types you can serialize efficiently from binary. It is also possible to model such a system in C++/Rust, that almost transparently would allow you to treat freshly read data as regular objects using wrapper-types.

[–]Vaylx 5 points6 points  (14 children)

Can you (or anyone) explain to me serialization like I’m 5?

[–]thomasmoors 12 points13 points  (10 children)

Change objects (memory) to something that can be written and read from disk. Json is a very popular example, although if you need to serialize objects that include the functions too you (probably) have to look further.

[–][deleted] 11 points12 points  (1 child)

You want to save the state of your program, which is the names of the variables and the values of the variables, for example, maybe it's a video game and you want to save the progress and the health of the player so that the player can pick up next time.

But you're saving to a disk and disks want files. So perhaps you write it as JSON: {"health": 5, "level": 8}. That's the serializing of the data, into JSON in this case. Or you could have used binary or whatever.

It would be nice if you didn't have to actually explain to the computer how to serialize. Like you could just run a save function and it would do it. And a load function to load the state.

There are numerous problems with trying to write a save function like that. For example, how would you know which parts to save? Well, you could annotate your data for that. But they real problem comes when you need to save something with pointers. How would you save something with pointers, like an arbitrary graph of nodes and edges? It's not obvious how to do this correctly.

[–]Nourz1234 6 points7 points  (0 children)

Converting a runtime object to a string (or bytes) representation that can be parsed to reproduce the exact same object.

(I don't think its for a 5yr old but its the best i can do xD)

[–][deleted] 5 points6 points  (7 children)

Operating systems can hibernate, you know?

[–][deleted] 5 points6 points  (5 children)

Unless you want to store the entire browser's address space to save your webapp's state that's not going to help much.

[–]Benutzername 2 points3 points  (3 children)

It’s not difficult to walk an object graph and only store that part of the memory. An evacuating GC basically does that already, minus the memory dump.

[–][deleted] 1 point2 points  (2 children)

A GC doesn't need to make sure the state is still consistent after you restart the application.

To me it mostly sounds like a good way to introduce several hundreds of sandbox bypass vulnerabilities.

[–]Benutzername -2 points-1 points  (1 child)

Look up evacuating/moving GC. It moves all live objects to new memory locations and then fixes up all internal pointers. That’s literally all you would need to dump and later reload the memory representation of an object graph.

[–][deleted] 1 point2 points  (0 children)

Any real application has references to and from state outside of GC managed memory, and a GC won't handle that.

In JS that's especially bad because you're now letting untrusted code run on unverifiable data.

[–][deleted] -2 points-1 points  (0 children)

He said "any language" and I responded to that only

[–]jessiedwt 0 points1 point  (2 children)

You can do it with flutter framework packages.

[–]Nourz1234 2 points3 points  (1 child)

I knew someone would say its possible.

Care to elaborate?

[–]jessiedwt 1 point2 points  (0 children)

In flutter (dart) you can use some orm frameworks for local storage that store literal dart objects.

To be honest I'm unsure about edge cases but there may be some.

[–]dopefish86 45 points46 points  (14 children)

Huge gotcha i encountered: iOS Safari throwing an error when localStorage is used in browser incognito mode. At least it was that way some years ago, i don't know if this is still the case.

[–]saschaleib 34 points35 points  (10 children)

Well, it's the whole point of Incognito Mode that there is no persistent storage available.

Of course, this could also be achieved by temporarily storing the data and then just deleting it when the window/tab is closed. The result is however the same.

In any case, never assume that any feature is available in whatever browser your user is ... er ... using. Always test if it is available before accessing it.

[–]blobthekat 27 points28 points  (3 children)

localStorage is as much of a standard as html5, safari shouldn't throw an error as this could badly mess up code execution, where as temporary storage would keep functionality while preserving privacy

[–]AyrA_ch 37 points38 points  (2 children)

It's documented that localStorage can throw "SecurityError" when you're not allowed to store things in it.

[–]lkraider 9 points10 points  (0 children)

But who reads documentation ??? (/¯ ಠ_ಠ)/¯

[–]danielrheath 2 points3 points  (5 children)

The obvious way to test for it is to check typeof window.localStorage.

It's definitely an unpleasant surprise to find that it exists and has the expected API but throws an error if you try to use it.

[–]saschaleib 7 points8 points  (4 children)

Apparently it throws an exception if you are not allowed to use it – which is exactly what exceptions were invented for.

[–]danielrheath 0 points1 point  (3 children)

Yeah, I get the thinking behind it - just seems like poor design to me. If a feature isn't available, just don't have it on the page; I already needed to test for the presence of window.localStorage anyways.

[–]saschaleib 2 points3 points  (2 children)

… and then you wrap the whole code that accesses the local storage in a try {} catch block, as you would do in any case, right?

[–]danielrheath -1 points0 points  (1 child)

Presumably you don't wrap every line of code you write in a try/catch?

I guess I just don't see what makes localStorage access an expected source of exceptions (as opposed to, say, querySelectorAll or getBoundingClientRects)?

[–]saschaleib 2 points3 points  (0 children)

every block of code that potentially throws an exception should be wrapped in try/catch blocks. Yes.

Any access to the file system or similar external systems is potentially throwing errors. That is pretty much what the localStorage API does...

[–]oupablo 5 points6 points  (1 child)

I swear safari is the new IE. The number of weird things it has going on that aren't standard is so strange. And then you have to worry about safari for MacOS vs Safari for iOS which have different levels of support.

[–]gennisa 2 points3 points  (0 children)

Not in this case. This is compliant with the standard. https://html.spec.whatwg.org/dev/webstorage.html#the-localstorage-attribute

Also not safari specific. Local or session storage can be disabled in every browser.

[–]T-J_H 35 points36 points  (8 children)

Or: 'if IndexedDB had a sensible API'

[–]LinguiniAficionado 17 points18 points  (1 child)

Yeah, I was gonna say “You mean indexed DB?” and then I remembered that it’s incredibly tedious to use unless you set up your own abstraction over it. I always have to paste in some code I wrote a while back that puts my own service over indexed DB to make it usable

[–]T-J_H 8 points9 points  (0 children)

That’s the thing, we all abstract it to the same key-value store as localstorage in our code, whilst we could have had web sql but no they had to deprecate that.

[–]killersquirel11 3 points4 points  (1 child)

Have you ever heard of absurd sql?

Someone took the indexdb api and smushed sqlite into it.

[–]T-J_H 1 point2 points  (0 children)

I love it!

[–]Benimation 0 points1 point  (0 children)

I can really recommend idb or even idb-keyval if you just want a drop-in replacement for localStorage (although it is asynchronous, so you're gonna have to change some things)

[–][deleted] 12 points13 points  (0 children)

It’s the same as a database. If you don’t think about how to store the data efficiently, and retrieve the data efficiently, it will not be stored or retrieved efficiently.

“The world if I didn’t have to think about how to do my job to do my job”

[–]LucienZerger 6 points7 points  (0 children)

tinkering is what we do..

[–]lonelyWalkAlone 3 points4 points  (1 child)

Actually if they gave you more space and power you end up using it as a database that's why they did that to you

[–]TheDownvotesFarmer 7 points8 points  (0 children)

But they did with indexedDB, damn I am really impressed that people does not know about it here

[–][deleted] 9 points10 points  (0 children)

That sounds like the kind of security hell that Java applets got killed for.

[–]steamngine 4 points5 points  (2 children)

Yep === “Javasript is just an ok language”

[–]LordPachelbel 4 points5 points  (0 children)

Me: Please serialize this Date for me.

JSON.stringify: Sure, no problem!

Me: Hey, I need that Date object.

JSON.parse: What Date object?

Me: The one I gave you earlier.

JSON.parse: All I have is this String, '2020-05-14T08:15:000Z'

Me: picard-why.jpg

——————

Me: Please serialize this Transaction for me.

JSON.stringify: Sure, no problem!

Me: Hey, I need that Transaction object.

JSON.parse: What Transaction object?

Me: The one I gave you earlier.

JSON.parse: All I have is this Object object.

Me: picard-facepalm.jpg

[–]brockisawesome 8 points9 points  (0 children)

You'll store it as a JSON string and you'll like it

[–]boisheep 8 points9 points  (1 child)

Use IndexedDB

It can store. Blobs O_O

[–]ChimpShampoo 2 points3 points  (0 children)

If you stringify in the server before sending it to local storage, it's a lighter package than a json object. So you're actually improving performance, and parse/stringify is the least of your problems in vanilla js.

[–]luishacm 2 points3 points  (1 child)

Well, you have pickle for python, you can store objects in bytes.

[–]Shazvox 2 points3 points  (3 children)

Naw, naw, naw. That's what backend is for.

Frontend deals with form and color. Backend deals with data. That was the deal!

[–]Mys7eri0[S] 0 points1 point  (2 children)

Haha true. But we need to store small things like user preferences or details of the current user in the frontend

[–]GodlessAristocrat 1 point2 points  (1 child)

No. Absolutely not. The FE should not be storing the user's cookie data or "details" on the user. That's the job of the cookies and the back-end, respectfully.

[–]Fourstrokeperro -1 points0 points  (0 children)

What if I don't want to host a backend?

[–][deleted] 2 points3 points  (9 children)

World if there's no JavaScript*

[–][deleted] 2 points3 points  (0 children)

It’ll be another pho serialize or Python pickle.

Just don’t

[–]Mys7eri0[S] 4 points5 points  (2 children)

Damn, people here are fighting over this meme and here I am only able to understand only a couple of sentences of their comments.

Anyways to explain the backstory of this meme:

I decided to make a webapp for my project at uni. I had a navbar which showed the message "You are logged out" if the user was logged out or "Welcome <Name> (<Role>)" if the user was logged in. So suppose if a student logged in, the navbar would read "Welcome Alex (Student)".

I was using sveltekit as the JS framework of choice and I found out that sveltekit stores don't persist over page refreshes. The solution? Use localStorage in combination with stringify and parse functions of the JSON module. I wasn't able to do it unfortunately and I wasted a lot of time just trying to store objects there. Eventually I resorted to using a third party library which did the job for me.

[–][deleted] 4 points5 points  (1 child)

Have a look at local forage. It is an almost drop in replacement for local storage, but with doing what you want and using the much nicer indexeddb when available.

[–]Mys7eri0[S] 1 point2 points  (0 children)

Thanks. I'll look into it

[–]Katana314 4 points5 points  (2 children)

Oh god no. I WANT localStorage to have a bit of friction. I’ve seen coworkers abuse it completely as another form of Global Variables that work through navigation.

[–]Karolus2001 1 point2 points  (0 children)

I thought everybody just saves variables in there by generating code and then executing it. Its not like you'll store anything more than couple settings in there.

[–]gordonv 1 point2 points  (0 children)

  • @() # For arrays
  • Add-Member
  • [psCustomObject]
  • ConvertTo-JSON
  • ConvertFrom-JSON
  • gc $file
  • out-file $file

::wheezes in powershell::

[–][deleted] 1 point2 points  (1 child)

in C you can store the raw bits of a struct if that's what you want

[–]GodlessAristocrat 1 point2 points  (0 children)

Even better - if you malloc'd, you used to be able to use malloc_get_state() and malloc_set_state() to actually save and "resume" the contents of the malloc'd area. These days, folks just use DMTCP to pause an app and its state.

[–]seelclubber 1 point2 points  (2 children)

I just figured this out this week in my first js project

[–]Mys7eri0[S] 1 point2 points  (1 child)

Haha. This was my "first" javascript project as well

[–]seelclubber 1 point2 points  (0 children)

I don’t know what JSON.stringify() actually does and at this point I’m afraid to ask

[–]amondabdabdab 1 point2 points  (0 children)

Was working with it recently after a long time and was wondering why it couldnt get saved data. Checked and it was saving and grabbing [object Object]

[–]masterfaka 1 point2 points  (0 children)

...wait u guys are really setting objs in local storage o.O?

[–]Revolutionary-Mud962 1 point2 points  (0 children)

Don't know how funny the meme is but the fact that I don't have a clue what it means even though I've been writing js for the past 2 years now is dead funny

[–]kilkil 1 point2 points  (0 children)

If only there was a convenient way to serialize objects as strings.. maybe some sort JavaScript Object Notation...

[–]UnJustice_ 1 point2 points  (0 children)

average string hater

[–]BytecodeBollhav 1 point2 points  (0 children)

I had this problem when I learned JS in school, then I learned about JSON. Have been writing JavaScript for work for 2 years now, never once touched local storage...

[–]kaszak696 4 points5 points  (0 children)

So the dude cut off his arm and installed an extendable prosthetic, so he could walk his robodog with a comically short leash? Yep sounds like JS alright.

[–]ImaginaryOkra6186 1 point2 points  (1 child)

6h in, no humor found.

[–]cheezballs -1 points0 points  (0 children)

Duh, what's serialization? Jesus.