CODEWITHSUNDEEP
javascriptjqueryfirefoxsession-storage
lrente
lrente

Reputation: 1140

Session Storage error on firefox only

My code works well in Chrome and Edge, but I'm getting this error in Firefox:

TypeError: 'key' called on an object that does not implement interface Storage

function goToNextStep() {
  $.post("../manager.php", {
    dados: sessionStorage,
    action: "save"
  }, function(response) {
    if (response === "1") {
      $.ajax({
        type: "GET",
        url: "../final.php",
        success: function(data) {
          $('#content').html(data);
        }
      });
    }
  });
}

Upvotes: 2

Views: 248

Answers (2)

Boris P.
Boris P.

Reputation: 415

I was able to solve this with the following workaround: 

function goToNextStep() {
  $.post("../manager.php", {
    dados: JSON.parse(JSON.stringify(localStorage)), // <----- change
    action: "save"
  }, function(response) {
    if (response === "1") {
      $.ajax({
        type: "GET",
        url: "../final.php",
        success: function(data) {
          $('#content').html(data);
        }
      });
    }
  });
}

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337646

You're attempting to pass the entire sessionStorage object in an AJAX request. Don't do that. Instead pull out the specific keys that you require. Something like this:

function goToNextStep() {
  $.post("../manager.php", {
    dados: {
      foo: sessionStorage.getItem('foo'),
      bar: sessionStorage.getItem('bar')
    },
    action: "save"
  }, function(response) {
    if (response === "1") {
      $.ajax({
        type: "GET",
        url: "../final.php",
        success: function(data) {
          $('#content').html(data);
        }
      });
    }
  });
}

I'd also suggest that you return JSON instead of plain text, as the latter can lead to issues with whitespace causing unexpected results. It's also better typed, so you can return a boolean state flag, eg:

if (response.success) {
  // your logic here...
}

Upvotes: 1

Related Questions