sessionStorage is gone when browser is refreshed - Javascript

Question

I am trying to keep some data in sessionStorage, but if I refresh the page or leave from a link then come back, the sessionStorage no longer exists.

I am new to sessionStorage, so sorry if this is an obvious fix.

Essentially I store an array into the sessionStorage.

  $scope.addPlant = function(plant) {
    for (i = 0; i < $scope.userPlantList.length; i++) {
      if ($scope.userPlantList[i] === plant) {
        alert("You have already added this plant");
        return;
      }
    }
    $scope.userPlantList.push($scope.currentPlant);
    sessionStorage.setItem("Plants",JSON.stringify($scope.userPlantList));
  };

And then when I want to see what is all stored

  $scope.retreiveList = function() {
    var retrieved = sessionStorage.getItem("Plants");
    $scope.userPlantList = JSON.parse(retrieved);
  }

And this works fine when I do not refresh the page/app at all.

Question: How can I get my sessionStorage to last during a refresh/immediate re-visit?

Burro

@JonathanLonowski Refreshing a page don't close the session. So the issue is somewhere else – Jaggy

Are you sure that on refresh, your script don't erase the data ? – Jaggy

Is any of your code asynchronous? – Snood

did you check using the the browser developer tools? – Indifferentism

@RémiBecheras I do not think so? I only use it twice those two times. Everything else done is just UI intercations with AngularJS – Burro

@Indifferentism What do you mean, exactly? I get no errors/warnings in my console log if that's what you mean – Burro

@Burro Go to the developer tools and make sure your data are gone from sessionStorage. If you using chrome: F12 -> Resources tab -> Session Storage. – Indifferentism

@Indifferentism whoooaa they do exist! So...what am I doing wrong in my access statement? Are they lost out of my scope or something? – Burro

Good findings. At what time\line you see the storage is empty? is the following line gives you back any data? var retrieved = sessionStorage.getItem("Plants"); – Indifferentism

@Indifferentism So I am dumb..during an edit, I held ctrl-z too long and one of my sessions variables was mis-spelled. haha. Everything works great! But thank you for teaching me about the resource tab! One parting question, in what scenarios will the sessionStorage be removed/destroyed? If you want to compile a summary answer of all of this stuff I will mark it correct. Thanks! – Burro

It's removed when you close the window. If you want persistent (till user destroys it manually), then you should use localstorage. – Deirdredeism

I think this is what you are looking for link – Cant

Answer 1

Check if the data are really gone by looking at the developer tools

If you using chrome: F12 -> Resources tab -> Session Storage.

sessionStorage lives with the browser tab. whenever you close a tab the sessionstorage data will be wiped out.

if you want something that will be shared across tabs, look for localStorage.

Indifferentism

Answer 2

I would recommend using the $window provider from angular

// set
$window.sessionStorage.setItem('Plants', angular.toJson($scope.userPlantList));
// get
$scope.userPlantList = angular.fromJson($window.sessionStorage.getItem('Plants')) || [];

Rasla

Angular wasn't mentioned in the question above, how about just using the window object? – Urena

angularjs is in the tags list – Rasla

Good catch reading tags. ^voted. – Abidjan

Answer 3

If you have devtools open, Chromium (at least version 124) seems to have a bug where if you do something like:

btn.onclick = () => {
  sessionStorage.test = 'x';
  location.reload();
}

It will not save your test-key. Just spent way too long figuring that out. Much frustrate.

The bad solution is to close devtools and hope you and your users don't have it open when clicking that button.

Miry