Hopefully everyone is staying safe and healthy out there! If you’re trapped in your house, or not, we have a couple great topics for you. First off we look at how COVID-19 is impacting some tech startups in the Seattle area, and offer some suggestions for what you can do during challenging times like this. From there, it’s off to the main topic of the day – the web storage API! We’ll discuss cookies, local storage, and session storage, how they differ, and what you need to know about them to use them for your next project.
Followup Resources
COVID-19 Industry Impacts (6:14)
- Remote: Office Not Required by Jason Fried and David Heinemeier Hansson
- Seattle startups forced to temporarily lay off workers due to impact from COVID-19 outbreak
Web Storage API (18:12)
- Browser Cookie Limits
- Browser Cookies: What Are They & Why Should You Care?
- The Browser Wars Are Back, but It’s Different This Time
- Can I Use: Storage API
- Cookies vs localStorage
- Introduction to localStorage and sessionStorage
- localStorage vs sessionStorage vs Cookies – a Detailed Comparison
- MDN Web Docs: Window.localStorage
- Store.js
- Web Storage Living Standard
- What is Session Hijacking (Cookie Side-Jacking)
- https://wpreset.com/localstorage-sessionstorage-cookies-detailed-comparison/
Transcript
The following is a machine-generated transcript of this episode. It will contain errors until it has been reviewed and edited, and we apologize for the difficulty that may cause for screen readers. Do you want to help us speed up our transcribing process? Consider sponsoring an episode.
Hey everybody, you’re listening to the broken UX podcast. This is episode number 59. And in this week’s episode, we are going to be talking about your guide to web storage cookies, local storage, session storage and the web storage API. Folks, I am your host, Michael Fienen.
I’m looking at the word storage and I’ve I feel like I’ve been looking at it too much. And it looks like stew rage now. I’m your other host.
Sir, for your eyes.
No, it’s that semantic satiation thing you know, it’s like storage.
Right? Thank you never had that problem with that that particular word. So rage, the way Folks, if you appreciate the podcast, go check out our current sponsors over at New cloud. It’s new cloud.com slash drunken UX that lets them know that you got there because of us and that so yeah, go check them out and, and say nice, nice things. If you’re listening to us on iTunes, leave us a little star rating. If you’re in Spotify, or pocket casts or cast box or any of them, hit the like button, hit the subscribe button, do all those things. Sure helps us out and we appreciate all the support you guys give us.
And speaking of support, be sure to come support us on the socials, Twitter and facebook.com slash truckin UX and instagram.com slash trucking UX podcast. And also come talk with us on slack trucking UX comm slash slack get onboard.
Hello Aaron. I want to play a game in front of me. I have two bottles. One a fine blended bourbon the other and unpainted Iowa scotch
Can I just like pour both into my mouth the same time. You
know, I just want you to choose which one I’m drinking the night. Hold them up on a surgeon’s pad here. here’s here’s what we got. So I picked up a bottle of four roses small batch. I’ve never had four roses. I’ve heard really good things about it. And this is the fancier small batch 190 proof and then I’ve got Brooke Lottie, the Lottie classic in a fancy green bottle. Oh, she is bottled at 100 proof it’s 50% which would make it the strongest scotch on my shelf right now.
I really liked that bottle, but I want you to try the four roses because I had four roses a few weeks ago and it was quite good.
For roses It is so I’m bringing my roses
because a month or two ago, we had a guest on the show. That’s
delightful. Hold on Listen to this. This this. Yeah. That’s like the perfect pop.
Yeah, that’s the one that I had. I mixed it with Oh yeah cherry vanilla coke. I think vanilla coke. It was good I mean it’s good on its own but whoo
boy that’s got a nose on it uh huh that thing that that punched me right in the sinuses I’m getting a little allergy now this spring setting in and getting up real fast and sweet though various got a very sweet like a cherry blossom II kinda not a rose. Yeah, they’re not a rose smell but like it’s lighter than that.
The the vanilla ones are more apparent in the finish on that one too. I’ve got the the balvenie Caribbean cask 14 that drank about a I think it might have been the same time I was drinking the four roses so we’re just switching tonight.
That’s a hot the hot bourbon.
Oh, you got the cinnamon in it.
like cinnamon almost like a Carmen Cartman type. Okay. There’s a there’s As a spy, he’s like a darker spice. Back in there like are a nice, kind of like in a suit type flavor. Yeah. Something there the other something dark there that’s I’ll have to play with this and see with a little ice.
It was tasty. I would buy that again.
But I interrupted you on your Caribbean cast. I apologize. It isn’t as good as I said.
Um, I like the double would better. But it is Yeah, yeah, it is. It is good. But
how would you compare the the balvenie Caribbean cast to the basil Hayden.
Rum cat. Oh, I like the bezel Hayden better. Do you? Okay, yeah, it’s it’s smoother. This one has this one reminds me of. I had that. MacAllan 12 gold. I like I like a nice strong burn to it. This reminds me a bit of that. It’s good. I mean, I don’t I don’t regret buying it. It’s definitely tasty. But I like the derive it better.
Interesting. Yeah that’s a rye is I think a more inaccessible flavor for a lot of people yeah. So the here and I know you I’m like your your whiskey journey is still fairly fairly early so to hear you saying that you like the ride better
as well it’s it’s just that one it was so they the way they did it was just it was so smooth and then like I swear it had like notes of coconut in it it was strange, but like it was just I can’t wait for you to try it. It’s really good
as I’ve sat here and let this for roses similar a little bit a very nice like as a small sipping whiskey is very warm. This one really gives you that that chest warm that you get from from bourbon. Yeah, but the vanilla comes in light for me. But it’s definitely there. And it’s something that I immediately after I’ve sat here For 30 seconds and and let that just kind of that warmth blossom it’s like I want to reach for it again and take another sip like it definitely. That’s nice. I’m not gonna lie that’s that’s very nice.
So, obviously you’re coughing
I’m concerned.
No, I’m okay. Okay, so today Today is the 21st and I’m saying that because things since the 15th have changed so dramatically that I have no idea what’s gonna be like when our listeners are actually hearing this but
that’s true yeah that a lot could happen in the next week and a half
right so so today is for the state of New York at least It’s day two of basically Shelter in Place Order shifts weird man.
I and my prediction is and again, this is something that predicting now for something that’ll add the layer later, but I think it is going to get worse before it gets better. Yeah. It’s interesting, I think right in our field because we like to think developers and designers and all of this, like we, more than a lot of folks can shift where we work. Yeah, with a certain amount of efficiency, but I mean,
so many of our jobs like mine, I’ve been remote for two years now. So many of us can just work. You work remotely, dude. Oh, yeah.
I’ve been a remote worker for eight years. Yeah. I mean, the fact of the matter is, businesses are still affected. It doesn’t necessarily matter if you can work from home if your business drops off.
Yeah. So the economic slowdown you know, if you’ve watched if you look your retirement at all, yeah, I
haven’t. And but don’t yet don’t do that. Yeah, but I mean, like that’s hitting everybody. And so yeah, if you think about, like, think about a fully loaded semi going down hill, and a car stops in front of them. They got to slam Those brakes and you got this loaded truck that, you know it shits gonna get broken. Yeah, because they aren’t designed to do that. And up until just a few weeks ago, everything was sunshine and roses. Uh huh. And that’s, that’s I think what has caught a lot of businesses off guard is how quickly things went bad, basically, because people don’t have content not just like people businesses don’t frequently have contingencies for pandemic. Nope. Yeah, nobody comes in, though. You know, everybody’s doing all this stuff. There’s an article at geek wire that the we’ll have links in the show notes that talks about some startups in Seattle. Oh, yeah, they
hit hard.
Yeah, so everything pretty much started in Washington as this article outline two different companies one’s called the Riveter. They’re like they do co working spaces. Okay. So obviously a problem. Shelter in Place does not work. really afford a co working okay do social distancing if you’re going to a place where other people are right and Anwar is another one that am I saying that to Kansan is it arm wha is that better arm his arm our to
our inquiry
which they’re they’re a subscription service okay and they have seen of course people are you know canceling subscriptions they’re not getting their boxes they’re not having clothes shipped to them but a lot of these startups especially they run very cash poor right part of the reason they run these giant series a series series a series a series is because they need cash to burn, right? And so when things go bad, so to put it into perspective, riveter 24 employees 34% of its staff on standby they are effectively not employed during that right period. Depending on what happens, they may not get to come back because it’s still, during all this time, you know, their revenue is plummeting, they can’t just bring everybody back. The second, the all clear is given because there won’t be money there. A lot of people now don’t necessarily have the cash flow to continue supporting those businesses even if they really, really want to. So like, there’s a good in this article, there’s a good sort of description it says, but our model is seeing members put subscriptions on hold. new customer acquisitions are quickly slowing. Many our mock customers work in the hospitality and travel industries. Both have been decimated by the social distancing mandates and closures. And so depending on like who you serve, like they they’re one of these companies that talking about the breaks got thrown really hard really quickly. And when you’re trying to manage these cash flows, and it just goes away. You know, most businesses can pick given opportunity, but that not in a couple of weeks time,
right? Well, Cornell and ethica College both they both shut down pretty early before the school districts did when they shut down and they stopped all travel and everything the local hotels just like they thought they had thrown the breaks. It was bad. Like all the all the hotels and hospitality like in the area like started hemorrhaging hard. Yeah.
And so like with web development, web designers, you know, whatever copywriters, things like this, you know, a lot of big companies there. They are set up well, for a number of reasons. You know, Microsoft is already equipped to send people home and work, you know, and they’ve got cash flow, and cash reserves, Apple, Google, Amazon, these folks like there, they can manage, for the most part through all of this. But the reality is most of us don’t work at companies like that. And yeah, it’s the you know, All of these smaller companies, these smaller industries, anywhere anything Nish is going to be impacted. And so yeah, for sure. I think the other thing to really consider is working from home is hard.
Yeah. Oh, yeah. We should do an episode about that.
Yeah, no. And we easily could right because the reality is, you know, a lot of people are getting a quick lesson in in this process a lot of people not in the tech industry. Yeah. are getting a less than this. I’ve got some friends who work in other like, what we save more traditional office based work at home and they’re like, how do you do this? I am so bored all day. How do you sit on video calls and not fall asleep and I’m like, you know, I’ve I’ve got my regimen. I’ve got my process. I wake up, I put my clothes on. I wear pants,
you know? So wait, those. I mean, wake up is obvious, but I it’s really important. If you You if you’re new to working, like working remotely, that’s super important because it’s like, it’s something about getting you in the right headspace and context switching correctly. You know, get up, take a shower, make your coffee, put actual clothes on, I mean, dude in the correct order there. And then, you know, have your workspace set up. It’s really like having a routine is really important. Because you know, if you go to an office, you could just get your stuff ready, you leave the house to go to your car, drive to work, you know, go into your job, you have the same kind of thing that sort of gets your your mind going. If you’re getting up, don’t work from your bed, don’t work in your pajamas. You know, don’t laze around on the couch with your laptop or whatever, like, get a table or a desk or whatever, even if it’s just the corner of your kitchen. Just pick someplace that’s your work area and use it.
Yeah, and don’t you know, don’t underestimate the challenges posed by it and think I’m I think one of the big things I’m looking forward to is a lot of people realizing how hard it is to work from home, but also how I think companies are also going to learn an important lesson about the value of people who can work remotely. Yeah. In a lot of industries, they’re going to discover that, hey, some flexibility in some of this stuff goes a long way. Some people are going to discover, hey, I’m way more efficient at home when I don’t have people poking in my office or whatever. It won’t be everybody and it’s okay. At the end of all of this, if you say, you know what, man, I can’t do that. Because it’s some people can’t. It’s not easy. It’s hard to resist that urge to go turn on the TV for an hour or go in the kitchen and make a snack every 10 minutes.
The people that I think struggle with it the most are the are like the extroverted types who need to have social interactions with other humans. I think introverted people in my experience tend to do much better With working remotely,
yeah, there’s a book by Jason freed and DHH. I think I mentioned it before, it’s called remote. If you’re interested in this stuff and like what habits you need to sort of curate in order to improve your work from home habits, I highly recommend it. It’s remote office not required, you can get on Amazon, get the ebook, I will put a link in the show notes to it, if you want to click that, and that, of course, helps support the show as well. But remote is a great book that will give you a lot of advice and a lot of techniques that you can employ to sort of help, you know, make that easier and less stressful.
I think the the target audience for that book, it’s like it doesn’t have chapters, it just has like, little essays. It’s a series of essays and I think the audience is either for management or employees who need solid arguments to give to manage for ya, remote is a good thing. I don’t like if you’re, if your office is already saying, oh, you’re gonna do distributed work, you know, here you go. I don’t the book will be helpful but maybe less. So this is really more about getting management on board and maybe helping facilitate management onto the benefits of doing distributed teams.
And I want to offer one last piece of advice for folks and this is mild, shameless self promotion. So I apologize, but if you have found yourselves impacted by layoffs or standbys, or you’re just generally worried about, you know, what opportunities are out there. The company I work for a Quint, that’s what we do. We are we find placements for people that work in web, if you’re a copywriter, you’re a product designer. You’re a front end developer, whatever. If you go to acorn.com slash find work, I’ll throw a link in the show notes. You can search by every major market in the US Remote opportunities that we have whatever, there are jobs, there are lots of jobs as it turns out, and all you have to do is go in there and dig. And so I encourage anybody that if you’re struggling or trying to find those opportunities, that is, you know, I say shameless self promotion, but I, I’ve worked there for as long as I have because I believe in what we do, and we do it well. And we do a lot of good work as a result of that. So go check that out and make use of those listings. That’s aq. UNTA. Qu e n t.com. Yeah. The other one Same, same jobs, just a different site. You can go to vitamin talent.com as well, vitamin talent, that’s our sister company, but they they share the same job database. So look at this, you’ll get the same results. Either one vitamin talent might be an easier one to spell though on the fly. For today’s topic for this week’s topic for this two weeks topic, one of the jump into something a little more techie for a change and discuss just a piece of technology with you guys that you maybe know a little bit about but don’t know a ton about or don’t know the details behind. And so I convinced Aaron that it was worth spending 30 minutes today talking about the storage API. Are you Why are you laughing at that? storage is serious.
The way you say it, like, well, I don’t know Michael, storage on the web. You should drawer.
You guys should see the way he talks to me on slack when I bring this stuff up. It is unkind. Let me tell you
what to say we have another your initials mF and that’s something else too.
Yeah, no, I believe me. I know I went I went to grade school. I heard jokes.
Yeah, mine is, ah, I’m not doing much better.
So just start with the most basic form of web storage that probably everybody is relatively familiar with is cookies. Yep. Cookies is web storage. It is a type of web storage. Now, I’m gonna be hopeful that when
we should rewind, when you say web storage, but what is the use case for this? Because we’re not talking like uploading a photo to Unknown Speaker Facebook or like saving a document in the cloud, we’re talking about in information about your interactions with the site,
right? That’s like client side
using So for the most part, yes. Cookies are really the exception to that. Yeah, generally, it’s all about state management. You know, information. About You. Cookies, the big thing about cookies, you know, and the reason you keep seeing this stuff in the news is, you know, tracking, tracking is done through cookies, specifically, because you said client side cookies, technically, they are stored client side, but they are a server side technology. Right? This is because cookies, the one of the big differences, when you visit a web page, cookies get sent to the server through the headers that you’re sending to request those pages, right. So anything stored in those cookies the server has access to, this is why the tracking piece of it is a big deal. There a cookie is at its heart, nothing more than a single small text file. It documents of mine in a text file really it it documents, the scope of that data, it documents, the expiration of that and a couple other minor flags. They’re very small We’re talking four kilobytes, it’s generally ranges depending on the browser between like, technically 4093 and 4097 bytes, but four kilobytes.
I’m trying to think of an analogy for this, like if, if. So if like server side storage where you might have like your profile photo, or your profile information, or the posts or comments you make is stored in a database or on the file system on the server side. If that’s like, you know, the big long term storage. I mean, cookies aren’t exactly like working memory. But it’s also not like it’s more ephemeral than that kind of storage.
Well, it’s a good way. So for instance, one way we’ve used cookies in the past is as like preference data, right? Yeah. Our front end website doesn’t use user accounts. So there’s nothing you know, if you set a preference on our website, the classic being cookie preference. Do you accept cookies on the site? Right like that? The way a lot of places determine that is they store a cookie that says, Did you or did you not accept cookies? I yes, I know it’s a snake eating its tail, but it you have to somehow
it’s just cookies all the way down cookies all the way down.
But when the site itself doesn’t have a user account, then there’s no thing you know, no, Id no unique key to go back to the store in a database to say, this was this user’s preference, right? Technically, yes, there are ways around that. I know. But realistically, that’s not the way people implemented. So that’s a lot of like little pieces of data like that will frequently get stored. I mentioned it
is it’s kind of like almost like a visitor’s badge, right. Like you go into a place and it’s just like this little. It says data that gets tacked on to you that describes some thing about your intersection with the place you’re visiting. Yeah, that can that can be thrown away at any time. And, but it’s like useful for communicating with the location, right? Sort of like that.
It also can have a lot of technical overhead. You’ll see if you ever go you can go into any browser and go into the inspector. And usually there’s an area called either application, I think in Chrome, and I think it’s just called storage in Firefox. I’m remembering that wrong. I use muscle memory to get to it at this point. But you can go in there and you can see every cookie that is stored on it from a site. And a lot of the times what you’ll see is a lot of stuff like one that you’ll see a lot j session ID. And it’s then just a string of letters and numbers, right? That’s not no human wrote that and no human is processing that that’s entirely being set server side to track you So that it knows that you’re the person doing whatever it is you’re doing, as you go back and forth in the site, if there’s anything session related that that server is doing on the back end to manage that, from memory management and threads, and all of that, to keep it all bound together as one event. There’s a lot of high, high technical stuff, basically, that can happen in cookies
is the J and J session. Id like Java like Java server, Java. Yeah. Because I know I’ve seen PHP session ID, right.
Yeah, same thing, same type of deal. So there’s, you’ll you’ll see a lot of those and it’s not a human being that has written those. But there is some there is server state management that happens as a result of those things. But then you’ll see all your tracking cookies, all of the you know, you’ll see ad roll mixed in there AdWords, Google Analytics will have IDs and stuff in there a lot of IDs, a whole lot of identifying pieces of information that gets stored in there. sent to the server so that it can be processed. Yeah. Now, this stuff in most browsers just as a point of technical information, you can safely store 20 cookies per site. Some browsers will let you go all the way up to 180. Strictly speaking, there are higher limits in a couple of weird cases. Generally, if you’re right, if you’re building something and you’re storing more than 20 cookies, though, you probably need to think about how you’re handling your data. Quite frankly.
I think I think if you’re setting cookies manually, maybe you should consider abstraction.
cookies have been with us for 24 years though, these things launched back in one, you know, the ancient IE versions back in 1998. Was that IE two or three?
Yeah, I remember. I think it was an html 3.0 book that I had. It was an O’Reilly I forget what was on The cover though, but it had it was like a rhino or something. Or camel. The camel was Pearl, whatever, anyways, it was like document set cookie. And they were really I mean, it was it was just like, I don’t know, it was kind of pointless slay it was, you know, like, Oh, you can see the last page that they were like they asked them their name or something like that or you know, which pages they visited on your site. It was really, like you had to do all the server interactions you did with CGI. So we didn’t have a lot of the elaborate web applications like we do now. So you really couldn’t leverage cookies at the quite the same as you can nowadays.
Yeah. And as a result, the one thing and we’ve talked about it on this show a couple times between Chrome and Firefox, you’re seeing this move towards a blocking cookies. And I think I think cookies are probably in their twilight years. As a technology at this point, third party cookies I think are pretty much universally going to be blocked within a couple more versions of most browsers. There’s I’ll have an article there from the verge that talks a lot about you know, from edge to Chrome, Safari all these and and what’s happening there, but increasingly, just because of privacy minded stuff and trying to comply with GDPR and ccpa and all these privacy laws, browsers are basically throwing their hands up and saying you know what, we were just gonna block third party cookies can be first party cookies can be third party first party cookies are cookies you are setting for your site. Third Party cookies are cookies that are getting set by other things on your site on behalf of you from other domains So Google Analytics is a good well, thinkable analytics actually sets first party cookies now. backtracking Facebook cookies, you know, Twitter tracking, things like that. Anything you do in that regard, if you use a tool like add this for social sharing or anything like that discus for commenting, they all set third party cookies, and you’ll see those on your site. And that’s what we call an origin, even though some are first party, some are third party. They are all part of your origin, so to speak. But they’re going to get blocked someday. And I mean, I think first party cookies will probably always be allowed. But by and large, the second part of what we’re going to talk about, I think, is the future for most of that. You can do all this in vanilla JavaScript, you can set cookies quite easily. But But why would you? I mean, again, preferences, you know, things. If you’re not familiar with the local storage API.
That’s true. Actually, no, I take that back. I’m being snarky. But, but I mean, getting down to the bare metal on that is always a really good way to understand the abstractions that Use later on.
And there are so there there’s one difference that cookies have that the storage API doesn’t have. cookies have an expiration date? Yes. And so if you are doing anything time sensitive, so for instance, good example, we built a product that lets users submit information in a survey to us. And we want to lock that down. One of the ways we do that is by setting a cookie that says, hey, this person submitted, but we don’t want them to not be able to submit ever again, that cookie has an expiration date of 60 days. So if they come back in two months, if they come back in one month, they get a message that says, hey, thanks, we’ve recorded your information, please come back Unknown Speaker later and further session data
yet, obviously, you can clear your session data that’s, you know, that’s always going to be true for anything we’re going to talk about here. But
I think I think a good I keep trying to think of a way to like mentally model Why you might intentionally use cookies, like explicitly, and that the thing that I think I’m running into is that, you know, we use cookies to kind of mediate the session relationship with the user. But ultimately, the user has control over that data. And you could go and you could edit your own session, you could edit your own cookies if you wanted. Yeah, totally. So like, you wouldn’t want to put anything sensitive in there,
which you are. I know. But the average user does not know that.
Sure. But you don’t want to put like financial data in it, or Oh,
yeah, absolutely. Yeah. And that’s one of the big risks, right? Because the one thing cookies are set server side, their store or client side, they’re stored client side, but they are sent to the server to be used server side and those headers, so you’ve got two big problems. One, if you’re not using a site over HTTPS, it’s not encrypted with SSL, then that data whatever is in it is being sent in plain text. Hmm. And there have been in the past like before. Now, and I’m, you know, going back 10 years, 15 years when SSL was not as common as it is. And application development was not as refined and matured as it is now, people would put session data in cookies. And that resulted in the second problem, which was people would build man in the middle attacks, where if your cookie is flowing through a compromised router or server or something like that, they would grab that cookie and do what’s called session hijacking. Right, once they know your session ID. If the server didn’t know how to truly authenticate that and validate it, you could take their session, Id put it into your system, and now you’re them.
What’s up at Amazon didn’t do SSL and they were just running a naked website but still selling anything ever to everyone? Edu went to that site and but your router or your browser were compromised by a third party doing a man in the middle attack and you go and you say like, Oh, I really want to buy, you know, this bottle of scotch, we’ll just imagine you can buy scotch. And it was I don’t know if you can now you can. Okay, well, let’s imagine that it’s also possible since we’re in a fantasy world. So there’s, this other person could then they would they would hijack, they would get your request, and then they would transform it, and they would change the address that you’re providing with a different address that gets sent to Amazon. And then when Amazon sends the response back, they would then change that address back to the address you gave it originally and give that back to you. So the browser session that you’re seeing looks like you putting everything there correctly, but ultimately, the attacker is going to have that scotch sent to whoever they want it to be probably them but maybe their friend or whoever. And just to be clear, that’s not how Amazon works.
But
no, no, it’s not. Amazon uses SSL and you will not have that issue with Amazon specifically. But that’s how a man in the middle of tech might work.
That’s that’s session hijacking. And it, it’s not nearly as prevalent as it used to be because most applications like you, you’re using something out of the box like WordPress, that doesn’t work with WordPress anymore thing, you know, that stuff is hardened in a way that makes it not possible. But if it’s something you’re writing, and you’re not being cognizant of some of that security stuff yet, absolutely a problem.
Yeah, if if you’re doing anything that involves personal data, or financial data, or I think those two things are the main ones, make sure that the site has HTTPS usually has a key and the top by the URL. If you don’t, if you’re not providing that kind of information, it sort of doesn’t matter. Like I don’t have HTTPS for my personal blog, but like I read what like someone’s gonna session hijack the comment you’re leaving, like your break.
Yeah, and just for the sake of humoring this, I’ve got a imager open in a tab. And so I just pulled up my cookies for imager. And like just scrolling through them, you can look at them and see like, there is nothing personal in it at all, like everything is like hash values. And you can do that you could hash data before you store and think encrypted or do whatever. I see, like, so here’s one, f underscore sort value is newest. So they’re using a cookie to save my sort preference on this machine. Hmm. And so you’re asking, like, why, you know, we’re Why would I use cookies on something? So this is a case of like, I maybe want to sort by newest on one machine, but maybe on my other machine, I want to sort by most popular or something like that. So it allows me to change the behavior per machine rather than having that defined by my account, so to speak, right? Okay. That’s just been, you know, one case But, and obviously, you could do that in local storage too. That’s not unique in that case. And actually looking at local storage, local storage is way different. As it turns out, there’s a lot of stuff in there that’s kind of interesting. They’re storing the last, last referenced post, you looked at things like that, and help tracking and probably some kind of interaction and like back and forth nav. Anyway. I don’t wanna go too far down that rabbit hole before we talk about the storage API. So the storage API is the second part of this conversation when it comes to web storage. The storage API, you may see it referenced in many different ways. You’ll see it called straight up local storage. Some people will refer to it as Dom storage. Or some people will just say web storage, but those are all talking about the same thing. We’re talking about the storage API, which is a browser API that has a little jailed index DB that are Or whatever in in the browser, all of this key value stuff can be stored. And right. It’s not new. I think that’s an important thing that, you know, just like cookies. So cookies have been around since 1996. And old tried and true
has only has browser storage been around. I remember seeing it. But I think when I first really heard about it was probably 2014 2015. around there. It’s like, five, six years ago. Yeah.
So as like a measure. So we had cookies in 96, the storage API launched with IE eight, in 2009. Okay, so we’ve had over 11 years. I wasn’t too far behind them. Yeah. And, you know, of course that early, it was still new, it was still you know, it wasn’t adopted everywhere. So probably by 2014. It was well adapted. And that’s something I’ll throw a link just in case anybody wants to reference to the Can I use that chart for it? It is universally supported across the board completely likes it has been since I ate it’s been supporting every version of edge it’s been in Firefox since version 3.5 in Chrome since version four in opera since version 11 and a half so and like opera is on version 66 right now, just for comparison, so like this is something it’s it is mature it is safe. It is supported opera
for using sequential numbers and not doing whatever it is Microsoft does.
Well now edge is the same as Chrome. So like edge was you know, went to version 12 or whatever. But then they jumped to Chrome’s WebKit versioning. So they’re both version at their, their it’s funny, there’s a point it seems for a lot of especially modern software products when they they realize that like the
the novelty of like, you know 20 25 years ago, you know, it was a big deal when a program but released a new version because they came out so rarely. But nowadays, like, you know, you’ll have major version releases every few months. And if you’re just using semver, then you’re gonna have frequently
images, and you get them automatically in most cases. Yeah. Which is great. You know, part of the amazing things about that is that’s one reason why CSS Grid was so successful as a new CSS feature that rolled out, because now we didn’t have to wait on people update browsers, browsers just update and they were able to roll that spec in. And yeah, materialized in a much more streamlined version. that’s neither here nor there. But there’s a couple articles I’ll link one from alligator.io. And I’ll also link to the the web storage spec that just has a lot of the technical stuff involved in it, but if you want to read that tech Some stuff, it’ll be there. One of the big advantages that the storage API gives you I said cookies have a limit of basically, four kilobytes of data. Right? Granted, that’s a fair amount of data, you know, from just like storing little strings. But local storage can. A it does vary by browser for what it’s worth. Right? every browser is a little different. So you kinda have to be aware of that. Usually, it’s 10 megabytes.
I have I just looked on Firefox, and it says, For between cookies and local storage, I’m using 497 megabytes of data. So
like, in total across everything, yeah. Across all sites.
Yeah. So I didn’t look at how that data is being used or what’s in it, but I sites are clearly making good use of
it. Fun fact, and this is gonna be one of those things that I’m gonna bet most people don’t know. The storage API through the browser has a cap on how much data it can use in total, like across all of your browsing habits. It’s 50% of your hard drive. What what? So if you’ve got a one terabyte hard drive, web storage is technically allowed through the browser to occupy up to 500 gigs of that.
Does it do it by looking at your disk geometry? Or?
Well, I mean, the, the browser knows how big your hard drive is, because it’s a system level application. So so it knows how much drive space there is. And so it just says, so my limit is 50% of that. Now, there are other factors that play into that because there are limits per origin. So that goes back to this idea that my site is an origin and the subdomains there,
okay, so is it based on the size of the drive your system is on or off? The size of the drive where the application is launched from
probably from where the application is launched from.
So if you put your browser on like 100 meg partition, then it will cap out local storage at 50. Meg’s
I’m gonna like not say yes or no, I don’t I honestly I don’t know technically if that’s true or not, but
I kind of want to like make a small partition just to test this out.
And it actually it may very well be the system drive because I’m guessing like I haven’t looked at like where local storage technically get stored. Like in Windows, I’m guessing it’s probably in like the user profile data for your Yeah, your system account, your operating system account. So it’s
probably that’s interesting. But my my system, I do have my system on a separate partition, and that’s smaller. So
again, fun fact, if you’re storing that much stuff in local storage for your application, you have a different problem to deal with that The one exception to the 10 megabyte rule is Safari, which I think is still five megabytes last I knew, though they do offer unlimited, quote unquote, storage, if it’s session storage, which we’ll talk about in just a second. Right. But again, you’re talking, you know, even if you keep it at five Meg’s that’s tuts so much more than the four kilobyte per you know, what’s four kilobytes times 20? Cookies is 80 kilobytes. Yeah. So like, you’re still light years ahead from a standpoint of how much access you’ve got. The storage API mentioned has two parts, local storage, and then session storage. That was the one I mentioned with Safari. local storage is persistent. That’s the important thing to know. session storage is.
Can you guess, I’m guessing it’s not persistence, not persistent, gives up. Very good gives up. You give it a little bit of resistance and it’s like, you know what, I’m gonna go a plus something else Unknown Speaker you get a star Unknown Speaker a star rage.
So yeah, session storage and local storage. They’re the exact same beats. The only difference is session storage obviously expires when you close your tab or browser. local storage and I mentioned talking about cookies, cookies have expiration dates. local storage has none. And I don’t know why these can’t get this done better. So local storage, having no expiration is maybe good, maybe bad. I think it’d be nice to have it. With cookies. The thing that always got me was Have you ever deleted a cookie in code?
Uh, probably deep. Do you know I have, like, all the stuff I’ve done with cookies has been like through layers of abstraction like either using like when I did PHP she’s in the cookies, right? Yeah, super var. Or like in Rails. I think it’s I think he said in the configuration whether or not you want use cookie store And then it just gets handled kind of implicitly by operations you do.
So there’s this really, really stupid thing about cookies if you want to delete them. Here’s the trick. So local storage has no expiration, which is weird cookies to delete them, you have to set the value of the cookie to nothing, which is half of it. The other half is to set your expiration date to January 1 1970.
Oh, see time. So, epoch epoch,
yes, epoch, but it’s just such a stupidly random thing to be like, yeah, I have to remember to set the expiration string the Thursday the first of January 1970. Zero. GMT. It’s like so Okay,
so we’ll have the reason for that. You probably know this, but maybe the listeners don’t. The reason for that is because so that’s called epoch time or I think also see time and any time You’re tracking any kind of date or time or anything, what it’s actually tracking is the number of seconds, since that exact moment in time. So when you set a cookie to that day, at midnight, you’re just setting it to be the setting the time of it to be zero,
right? But that’s stupid. Like that is that is a stupid way to have to delete a cookie.
Oh, I don’t disagree.
So the nice thing, so the the storage API, and again, this is the same whether you’re doing it session based or local storage. And I’ll throw the MDN link as well just so this is you can reference all of this after the show, but they have four methods. They work the same way. And they’re beautiful. Said item. Okay, get item, remove item and clear. Rice, and that’s all you have to know. Yeah, there’s no again, I mean, there is no date handling at all, but nice. It’s a JavaScript API because session storage and local Storage cookies are a server side technology they get sent in the headers to the site that you’re talking to. session storage and local storage are purely client side. And you access them through JavaScript, the only possible way the server gets access to it is if the JavaScript itself is making the calls back to the server using that data for something. But it is not intrinsically sent to the server, the way cookies are in your that can be good that can be bad depends on what you’re trying to get done. But it does also mean like if you’re using HTTPS, you don’t have to worry about anything because all your communication is going to be encrypted. That way, you never have to worry about being sent in plain text again, unless somebody has built it wrong. The biggest drawback if there’s if there is anything I would call out is that and this is true with cookies as well. But yeah, local storage only supports strings. So it’s a key value pair and the value is a string. No matter what, you put a number in it, it’s a string representation of the number. You put right? a JSON blob in it. It’s a string representation of the JSON blob. Okay? Now you can still you can store integers in it, you can store arrays in it, Jason, Hey,
can you take like, take like a binary and base 64 encode it and store it? Sure. That’s a string. It’s a rhetorical question you can
get up to five Meg’s lace. The the one thing you can do though, is you could store those and you can of course type check them on saving and retrieval, and then cast them back to their proper type. There’s two like with Jason, if you’re doing anything with Jason data, I mentioned I was looking at imager and what it’s got stored. And one of the things I noticed straight away is that there’s a lot of JSON data in there. There are several arrays in there. Jason Luckily, has two perfectly useful methods on it that you can call Jason stringify that bring a file as your your content, you can store it and then JSON dot parse. So you retrieve it and then you just dot parse it and boom, you’ve got a normal JSON object to work with. Cool that. So even though there is sort of that weird limitation that it’s quote unquote, string only, you can represent a lot of things as strings, and then, you know, cast them after the fact, there are libraries that can help with this one. And there, there are many, let me be very clear, there are a lot of libraries to help with this. There are jQuery plugins that will help with this. There’s one that I’ve used and that I like, and I’m just going to talk about it and you can go to NPM. And just do a search for the word local storage and you’ll find some, but store dot j. s is the one that I’ve used, and I really like it. So it it does what you were talking about Aaron, it’s abstraction. It’s a layer of abstraction that can sit on top of all of this and All you have to do is whatever you’re building it installs through NPM. Or you can just download it as a static asset and include it on your site. It supports several different storage schemes. And you can specify which ones you want, or you can just use all of them. But one of the things it does is it checks the browser for what is supported. And it can fail through them until it finds one that works. So if the browser if it’s an old browser that doesn’t support local storage, it’ll check other things until it gets to cookies. And it says, Oh, hey, but cookies work. So it will store your stuff in a cookie. When you do a set or a get action. You don’t have to worry about if it’s using a cookie. Hmm. All you have to worry about is because again, it’s a layer of abstraction, and it’s smart enough to know which one it is. The other thing that it’s good at is it does all that casting so it knows when it’s dealing with an integer or a Jason stroke. and things like that. And it’s even got some operators that are super cool because it lets you go, like pull data out of local storage based on JSON values in those and call properties out of it. Because again, it’s abstracting that and underneath the covers, it’s doing all the for each loops to pull all the values and search them properly and do all that. But you don’t have to worry about any of the code to make that happen. So that’s, you know, that process of
use that before.
It’s worth looking at. Yeah, I say I like it a whole lot. I like the fact that it kind of helps with all of this. The one thing I’m going to caution there’s one catch, and it does come in I think very specifically with a tool like store. And it goes back to part of what we were talking about early on about, like security and privacy. And part of the reason cookies are a problem is because of stuff like GDPR ccpa all this privacy stuff, right? When you are using cookies, and this is true, the EU cookie law and a user’s right to delete cookies or you know control how they’re being tracked. The quote unquote cookie law does not apply just to cookies. It applies to any stored data about the user. And so you you need to you do need to pay attention now using a tool like store dot j s does still help, because you don’t have to really care how it’s doing it. But you still need to make sure you’re taking the time to know what is and is not being set. And how you’re going to handle letting users control those things. And a lot of people don’t want to deal with that. They don’t want to think about it. They want to do all or nothing. Believe me that that is a topic that will be coming up here on the podcast. Probably sooner. rather than later is really digging into all of you know, these requirements for cookies and why you see these banners popping up everywhere and how you build those tools. So store dot j s or any of the you know, the local storage API tools can certainly help you with that. But you do need to at least take some time to pay attention to how your data is stored and and where it goes. Yeah. Nice. So I hope that was helpful. I know this. This was a nice little lightweight, I think, chat. But there’s,
I think we need it right now. And
yeah, we need some easy stuff right now. I think all of us this is a fun, like, it’s interesting to go play with and start. We’ve built several tools over the past few years at my job that have used local storage heavily. And it’s pretty cool. When you start thinking about like, all of these little things you can do. It’s like, Oh, yeah, you know what if we save this piece of data and the user comes back, then we can show them the exact thing they saw the last time
I thought of a good analogy, finally It’s like, it’s like client side validation versus server side validation, like you wouldn’t like server side validation is like we need, we’re going to check this data to make sure that it works. So doesn’t break anything or do bad stuff. client side validation is, we’re going to do stuff here, just so that the user has an easier experience interacting with our site. That’s kind of the difference there, right, like using browser storage or cookies to sort of facilitate their experience if they don’t want to do that. Like if they just wanted to eat cookies every session that’s on them. Yeah, whatever. No big deal. But like, you’re not going to put anything in there. That’s gonna, like, be gamebreaking or is critical,
right? Yeah. And that, yeah, that’s a great point that it doesn’t matter if you’re using cookies, local storage, session storage, especially session storage. Hmm. I mean, you always have to operate from the assumption that the next time that user comes back, you may have none of that data. Right, it may all be gone and so the stuff you would store is user accounts in a database about that user. That’s all the stuff that you need to make sure it’s always available when they log in, they come in and all of that, so,
but you can put in anything in browser storage, that would be facilitating their experience, right?
And be aware that and you mentioned this error and that users can edit that you can go in and change a value in there and put something in you can add your own values doesn’t do anything. Because I mean, if the if the server or whatever doesn’t need it, then it just ignores it. But you can, you can go in there and manipulate that stuff. As a user, you can delete stuff that whether that’s some people delete everything when they close their browsers, you know, that’s a privacy setting that does exist. So that’s something to keep in mind.
Go and tweak your cookies and then take screenshots and some of the tech support be like why is this site look like this?
So like I say, I hope that was helpful. Sit back with us for just a second. We’re gonna get to our sponsors and get back and get out of your The drunken UX podcast is brought to you by our friends at New cloud. New cloud is an industry leading interactive map provider who has been building location based solutions for organizations for a decade. Are you trying to find a simple solution to provide your users with an interactive map of your school city or business? Well, new clouds interactive map platform gives you the power to make and edit a custom interactive map in just minutes. They have a team of professional cartographers who specialize in map illustrations of many different styles and are ready to design and artistic rendering to fit your exact needs. One map serves all of your users devices with responsive maps that are designed to scale and blend in seamlessly with your existing website. To request a demonstration, or to view their portfolio, visit them online at New cloud.com slash drunken UX that’s in you cloud Calm slash drunken UX.
Well, thanks for sticking with us, everyone long winded I hope everyone’s cabin fever is okay. And, you know, I guess I hope that everything is still alive and functioning and that it’s not, you know, the nine days from now till this airs, but it’s not like mad max out there.
Take care of yourselves and go out like yeah, you may be social distancing. You may not be going into the outdoors or still open for business though. Go for a walk, go for a hike.
You know, I think go for a bike ride if you weren’t working before anyways, a look up, look up bike strategies, techniques for working remotely, because if you’re homebound right now, and unable to do social things, I bet there’s probably some good suggestions for how to kind of maintain sanity and keep things going.
Yeah. One of the best ways I think you can do that is by connecting with us on Social media, check us out, hit us up on Twitter or Facebook where it slashed broken UX.
Between the two of us. You’ve got 10 years of solid remote working experience. So we’re happy to answer questions that we know lots of people who also work remotely. So yeah, definitely reach out.
Yeah. Hit us up, chat with us ask questions. Hit us in Slack, dragani comm slash slack. We’re happy to give you advice there if you want to have a longer conversation or even a private conversation, you know, obviously Twitter, Facebook, those are more public, but I’m in slack and when Twitter’s public and dm Well, some of them are not all of them. But you can have you can dm us on slack or whatever. You can dm us on Twitter to Yeah, if you’re scared or one advice or something and yeah, whatever. Yeah, I let’s see. Oh, and Instagram is also a place where we are sharing all the memes lately, so
yeah, no, dude, I was just gonna say like, the meme game has been on point. There’s been some good ones in there. Thank you.
That’s instagram.com slash drunken you next podcast. And yeah, the last piece of remote stuff just that we like to say, well, we’ll have a link to it but go check out DHH his book remote. Well, Jason freed and DHH his book remote from office not required. We’ll have a link to that in our show notes. You know, if nothing else, I think it’ll help ease anxiety and give you some good advice and things like that and, you know, make have a routine have a have a routine Yes, I we sort
of touched on earlier. That’s probably the most important thing. Like day to day like, put yourself even if it’s like, the most basic of things, you know, banalities, like, just have a routine that you do every day that will give your day structure and help you from
help the days from bleeding together and honestly really important. The most important piece of advice I can possibly give you on a show like this and talking about that is put your pants on. Don’t you know that joke about
oh, we’re
doing video chats and And no they’re not wearing pants. They just have a shirt on. No every put your damn pants on. Yeah, you were still a human being working in it.
I’ll be honest, I didn’t wear jeans today I’m wearing my NASA pajama pants.
He kind of had it put your pants on. But actually man, I say that then in all honesty, it’s true. But there is another important piece of advice and folks that is to keep your personas close. And your users closer. By by
Sto-rage
This episode of The Drunken UX Podcast brought to you by nuCloud.