What happens when local / Session Storage is full? - javascript

I know its near to impossible but I have a question in my mind.
what will be the behavior of the web application if all the web storage(local / session) is full in angular web app ?
Does it effect the performance of the web app ? if yes then how it will effect ?
how the application will react in the following browsers chrome, firefox and Opera ?
I'm reading a blog which discuss the session and local storage but i did't find my Answer there.
(https://krishankantsinghal.medium.com/local-storage-vs-session-storage-vs-cookie-22655ff75a8)

If storage is full when you try to add something to it, according to the specification the method that's adding the new/updated item must throw a QuotaExceededError. So your app/page will work just fine if storage is full but if it tries to add anything, that action will fail with an error.
From that link:
The setItem(key, value) method must first check if a key/value pair with the given key already exists in the list associated with the object.
If it does not, then a new key/value pair must be added to the list, with the given key and with its value set to value.
If the given key does exist in the list, and its value is not equal to value, then it must have its value updated to value. If its previous value is equal to value, then the method must do nothing.
If it couldn't set the new value, the method must throw a QuotaExceededError exception. (Setting could fail if, e.g., the user has disabled storage for the site, or if the quota has been exceeded.)
(my emphasis)

There is a special exception for that: quota exceeded.
You can read about it here: https://chrisberkhout.com/blog/localstorage-errors/

Related

LaunchDarkly: how to access flag values from `localStorage`

I'm using LaunchDarkly in a web app and am playing around with using the 'localStorage' bootstrap option on initialization.
With this option I clearly see my flags in localStorage and they look to be under a key formed with my clientId and then some long, base64 string - I'm curious if there is a clear pattern I can use to access the flag values in localStorage with getItem or if I'm perhaps completely misinterpreting the use case?
What I tried was adding the optional bootstrap option and then logging out my localStorage to see what key the flag values were being stored in, and they appear to be mapped to a key that includes my LD client ID and then some long, seemingly random string.
What I expected was for my keys to be stored under a key of maybe just my LD client ID or some other, easily found property name.
Thank you for any and all insight!
Best,
Zach
The JavaScript client SDK already caches flags in localstorage for you. When the SDK initializes, the flag values for the context (i.e. user) you provide are pulled and cached in localStorage. From that point on, LaunchDarkly's SDK uses localStorage for getting flag values, speeding up flag evaluations and ensuring that flags can be evaluated in the circumstance where LaunchDarkly is temporarily unavailable. Updates to this localStorage cache are streamed by default (though you an configure this for polling).
My point is, there may be no need for bootstrapping off localStorage. Bootstrapping on the client-side is useful for situations where you are writing these values prior to the response hitting the client's browser (for example, you are writing bootstrapped values at the edge).

What should be correct unambiguous server side behavior for missing optional field values when updating a record?

We have an Angular + Laravel 5 application and we attempt to adhere to RESTful design (although, to be honest, we don't implement it fully).
I noticed that with time we have accumulated some inconsistencies for processing empty values for optional fields when updating a record. Here's what happens:
in some cases programmer just ignores the fact that optional values are missing and passes only the received values to Laravel model. This results in preserving the old value unchanged in the database.
in some cases programmer tries to be smart and assumes - if the optional field was not received, then the user might want to fill it with some global default value (which usually means null ). This results in overwriting the old value with default value in the database. What's confusing - in some cases this behavior is explicitly requested by our customer for some specific fields - that is, if user did not send anything to our web API, we should overwrite the old value with null.
in some cases programmer tries to prevent the ambiguity and rejects the request even if optional value is missing (we are using custom present Laravel validation rule for this purpose). If user really wants to fill the value with default, then explicit null (or whatever the default value is) should be sent from the web form. This usually is not a problem when updating because then the web form usually will be already filled with the old values, but it gets messy when saving new records because Angular by default does not send unfilled form fields to the server. So we have to force it and thus we end up with our Javascript models filled with lots of model initialization code like { someOptionalField:null, someOptionalField2:null, ... }. Some programmers in our team argue that this looks ugly. I had an idea to extend Angular's ngModel directive to implicitly fill nulls in undefined model values, so they get always sent to the server. But I'm not sure if this is the correct solution because I haven't seen other Angular programmers on the Internet do something like that.
What is the correct way to solve this in unambiguous manner and to make things clear for both server side programmers and users of our web API? Are there any known design patterns or best practices for this?
I myself and also we at work handle this on the backend side. If there is an optional field, which MUST have a value (sounds funny right?), it will get set to its default value if the given input is empty or simply not there.
Just ignoring the fields or setting the value of old data to null is undesirable like you said and should not be done.
I like creating the default values at the top of my validation functions and just override it with the new one if its present. If there is an old value, use it over the default:
1. Validation progress starts
2. If value is given - use it
2.1 If not given, look if there is an old value for this field and if so, use it
2.2 If still no value, use default
Therefore you don't get errors because a field is empty/not set or at least don't have to worry about it. And also you can handle defaults/old values properly.
The problem with you having angular not sending empty fields could be compensated if you serialize the full form and send it to the server.
If this doesn't work as simple as it does in jQuery (form.serialize()) or still having empty fields, why not loop over all form elements and creating the JSON/form data by hand?
This answer is mostly opinion based (as the question itself is), but I hope it helps you!

Find the last visited URL in javascript with history

I know about document.referer and this is not what I'm looking for.
It could probably be a solution but I want to retrieve it in local without using server.
Steps :
I'm pushing a new state in the current url of my page with history.pushState('','','#test')
I'm going to the next page.
And now I want to retrieve the URL but history.previous has been erased since Gecko 26.
Is there an other way of getting this value except from using cookies or sessionStorage?
One way of doing it would be to put the value in a parameter of the next page address, like so:
http://server.com/next-page-address/whatever.html?prevData=RequiredStateData
Note that using this approach, you might be exposed to users changing RequiredStateData in a malicious way. You can protect yourself using encryption or some checksum field.
So my problem was that there is no option for that purpose in local without a server environment.
If you find this question it's that you're probably in the same problem as me so the only option I found was to use.
sessionStorage.setItem('foo',val) and retrieve it with sessionStorage.getItem('foo').

Change the name of a local-storage collection

As per my new requirement I have to change the name of the local-storage collection name, which is by default set to its domain name. Is this possible? I have already searched it and didn't get anything. It is just to confirm that is this possible.
Suppose I have a domain named : http://www.example.com
then the local-storage will be created as http://www.example.com and its key value pair.
I want to change this from "http://www.example.com" to "http://www.example.com_local".
Please confirm me if it is possible anyhow. I am building an Umbraco website using MVC 4.
Thanks in advance.
If it's not the key you want to change, but the value, then remember that localStorage operates on strings and only persists the value when you call setItem.
Keeping a reference to the original value you are setting, and changing that will not change anything in the localStorage. When dealing with the localStorage HTML5 API, then you need to re-set the value when you change it. You also need to re-set the value (and remove the old) if you change the key.
If you are using some helper API/library, then anything(almost) could be wrapped in it, making it impossible for me to help unless i know what library that is.

localStorage not storing persistently between two pages

I'm developing an application and, at certain point, I need to store information that requires to be persistent between multiple pages, more probably, it will only be 2 pages.
The amount of information varies between just a few bytes and about 15KB (It will never be more than 20KB, ever). I can't really properly predict beforehand how much it will be.
For that I decided to use localStorage.
For now I'm only working on localhost:8080.
The pages, for now have only generic names: pageA.php and pageB.php.
The pages reside on the root of the domain. I.e.
http://localhost:8080/pageA.php
http://localhost:8080/pageB.php
...
At certain times, I store data on localStorage, on pageA.php (I do use the setItem() method).
When the user moves to pageB.php, pageB.php's script then tries to get the data that was stored in pageA.php.
The problem is that getItem() always returns null on pageB.php
I did check the keys I'm using and they are the same, so there should be no problems there.
I've checked, data stored is persisting between page loads as long as the url does not change.
What am I doing wrong here?
Note: tested only on Firefox 19 and on chrome 24
The problem here was that the editor I was using had been changed such that it was searching with case sensitivity.
When I changed the string i was using for the key, the replacer didn't match all the strings due to case sensivity.
I solved it by searching and adapting each key such that all keys had the same characters with the same case, not the same characters regardless of case.
In the in the end, it was just lack of attention. As expected, strings in javascript are case sensitive and that also applies to the key for localStorage and sessionStorage

Categories