I use the session storage to set a key that can take numeric values or null
. I noticed that the field is stored as a string no matter what I put in. Is there a nice way to convert back my stored value to null
?
For instance, I want to do a check in my code as such:
if (!sessionStorage.getItem('key')) {
// do something
}
Whats the best way to make that check? The obvious way would be
if (!sessionStorage.getItem('key') !== "null") {
// do something
}
I am wondering if there's an alternative.
I use the session storage to set a key that can take numeric values or null
. I noticed that the field is stored as a string no matter what I put in. Is there a nice way to convert back my stored value to null
?
For instance, I want to do a check in my code as such:
if (!sessionStorage.getItem('key')) {
// do something
}
Whats the best way to make that check? The obvious way would be
if (!sessionStorage.getItem('key') !== "null") {
// do something
}
I am wondering if there's an alternative.
Share Improve this question asked Mar 10, 2016 at 21:28 QuantumLichtQuantumLicht 2,1833 gold badges23 silver badges33 bronze badges 4 |5 Answers
Reset to default 13You can parse it
JSON.parse('null') // null
JSON.parse('1') // 1
so
var val = sessionStorage.getItem('key');
val = JSON.parse(val);
Close to cast
Alternative would be:
var val = sessionStorage.getItem('key');
val = val*1 || null;
I just want something that would evaluate to false
You could use an empty string instead to mark the unset value:
sessionStorage.setItem('key','');
This way you can re-use your current check:
if (!sessionStorage.getItem('key')) {
// do something
}
That said, you mentioned you had a drop down to select values, and that's why you need such a value, but I think a solution involving deleting the item on the null value would be better. Here's a working demo, and the code used to make it:
var dd = document.getElementById('dropdown');
dd.addEventListener('change', function(){
var value = this.value;
if (value === 'null')
sessionStorage.removeItem('key');
else sessionStorage.setItem('key', value);
});
var check = document.getElementById('check');
check.addEventListener('click', function(){
this.innerHTML = 'Value: '+sessionStorage.getItem('key')+
', check: '+(!sessionStorage.getItem('key'));
});
<select id="dropdown">
<option value="null">none</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<button id="check">Check value</button>
Serialize your value as JSON before writing it to storage.
var json = JSON.stringify(val);
Then parse it when you read it out again.
try {
var val = JSON.parse(storage.item);
} catch(ex) {
// handle errors
}
It's important to wrap the parser in a try block. If the user or the browser clears the session storage, then you'd be trying to JSON.parse('undefined')
which will throw an error.
The sessionStorage is a key-value database where both are store as strings. You can see the documentation stating DOMString
for both Storage.setItem() and Storage.getItem().
The nature of this is then that the objects you retrieve will always be strings. You will have to cast them manually, either by applying JSON.parse()
or a completely manual approach. There is no way to get back the null
without any operations.
Another approach that has been mentioned is simply to avoid storing null
values in the sessionStorage. It is easier to check if a key exists than to cast it correctly afterwards.
Since the returned statements are in strings you can say if(!sessionStorage.setItem('key','')) {}
sessionStorage.removeItem('key')
instead ofsessionStorage.setItem('key','null')
? – SeinopSys Commented Mar 10, 2016 at 21:30key
. it's binded to an event listerner, so it would be odd in one case to do a delete and in all other case to set the value no? – QuantumLicht Commented Mar 10, 2016 at 21:33null
,not set
,0
or whatever you choose, or just remove the item and check that it's not set. – adeneo Commented Mar 10, 2016 at 21:35