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?

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.

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')) || [];