localStorage 不会存储数据答案

【问题标题】：localStorage won't store datalocalStorage 不会存储数据
【发布时间】：2020-09-25 11:21:50
【问题描述】：

我有一个带有访问令牌的简单登录和注销应用程序的演示。如果用户还没有登录并且他们尝试访问其他页面，这意味着访问令牌为空，他们将直接返回登录页面。我使用 sessionStorage 来存储用户令牌，它工作正常。当我尝试使用 localStorage 时，我的应用程序将不再工作。它仍然登录，但有一个瞬间，它引导我回到登录页面，就像我的令牌根本没有保存一样。成功登录后它仍然会生成新令牌，所以我猜它与localStorage有关。

编辑：我刚刚检查过，他们都存储了我的令牌，但我无法使用 localStorage 将其解析到其他页面。

我的登录页面代码：

$('#btnLogin').click(function () {
            $.ajax({
                url: '/token',
                method: 'POST',
                contentType: 'application/json',
                data: {
                    userName: $('#txtFullname').val(),
                    password: $('#txtPassword').val(),
                    grant_type: 'password'
                },
                // Khi đăng nhập thành công, lưu token vào sessionStorage
                success: function (response) {
                    //sessionStorage.setItem("accessToken", response.access_token);
                    localStorage.setItem("accessToken", response.access_token);
                    window.location.href = "User.html";
                    //$('#divErrorText').text(JSON.stringify(response));
                    //$('#divError').show('fade');
                },
                // Display errors if any in the Bootstrap alert <div>
                error: function (jqXHR) {
                    $('#divErrorText').text(jqXHR.responseText);
                    $('#divError').show('fade');
                }
            });
        });

其他页面基本代码：

if (localStorage.getItem('accessToken') == null) {
            window.location.href = "Login.html";
        }

【问题讨论】：

这localStorage.getItem('accessToken') 打印null 但sessionStorage.getItem('accessToken') 打印一些值吗？
我刚回来查看，他们都存储了我的令牌，但我无法使用 localStorage 将其解析到其他页面。
你能把debugger 放入成功方法中并检查响应吗

标签： javascript ajax local-storage

【解决方案1】：

您确定 response.access_token 不会为空吗？

您可以从Chrome中的开发工具（Windows：Ctrl + Shift + i或macOs：command + option + i）>应用程序>存储>本地查看它存储：

如您所见，该值可以设置为 null。

希望对你有帮助。

【讨论】：

【解决方案2】：

localStorage 仅支持字符串值。 response.access_token 可能不是字符串值。所以试试这个：

localStorage.setItem("accessToken", JSON.stringify(response.access_token));

在检索时，

JSON.parse(localStorage.getItem("accessToken"))

【讨论】：

【解决方案3】：

尝试使用以下方法将对象保存在localstorage中（如https://stackoverflow.com/a/2010948所示）

var testObject = { 'one': 1, 'two': 2, 'three': 3 };

// Put the object into storage
localStorage.setItem('testObject', JSON.stringify(testObject));

// Retrieve the object from storage
var retrievedObject = localStorage.getItem('testObject');

console.log('retrievedObject: ', JSON.parse(retrievedObject));

在你的代码中我们可以这样做

$('#btnLogin').click(function () {
            $.ajax({
                url: '/token',
                method: 'POST',
                contentType: 'application/json',
                data: {
                    userName: $('#txtFullname').val(),
                    password: $('#txtPassword').val(),
                    grant_type: 'password'
                },
                // Khi đăng nhập thành công, lưu token vào sessionStorage
                success: function (response) {
                    var obj= { 'accessToken': response.access_token};
                    localStorage.setItem(JSON.stringify(obj));
                    window.location.href = "User.html";
                },
                // Display errors if any in the Bootstrap alert <div>
                error: function (jqXHR) {
                    $('#divErrorText').text(jqXHR.responseText);
                    $('#divError').show('fade');
                }
            });
        });

【讨论】：