未捕获（承诺）TypeError：localStorage.setItem 不是 function

Question

I want to create a project with localstorage, but when I save it with setItem error show up like this:

Uncaught (in promise) TypeError: localStorage.setItem is not a function

This is my code:

var dataPerson = {
    name: "Jhon",
    old: 20,
    family: "Doe",
};
console.log(dataPerson);

if (typeof(Storage) !== "undefined") {
    // Store
    localStorage.setItem("data", JSON.stringify(dataPerson));
} else {
    alert("Sorry, your browser does not support Web Storage...");
}

I use jQuery v3.4.1, Thank you

Answer 1

Can you try invoking localStorage from the window object...

window.localStorage.setItem("data", JSON.stringify(dataPerson));

This worked for me.

Answer 2

Check your code again if you've redefined the localStorage on somewhere else.

The code is completely working. https://stackblitz.com/edit/js-jpzvta?embed=1&file=index.js

Answer 3

from https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage :

Exceptions

SecurityError The request violates a policy decision, or the origin is not a valid scheme/host/port tuple (this can happen if the origin uses the file: or data: scheme, for example). For example, the user may have their browser configured to deny permission to persist data for the specified origin.

so you should envelope your code with a try-catch, that will solve your

Uncaught (in promise) TypeError: localStorage.setItem is not a function

in https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API you have an example of it, and given your particular exception, I'd start by

Feature-detecting localStorage

To be able to use localStorage, we should first verify that it is supported and available in the current browsing session.