localStorage不会存储数据

问题描述 投票:3回答:4

我有一个带有访问令牌的简单登录和注销应用程序的演示。如果用户尚未登录并且尝试访问其他页面,这意味着访问令牌为null,则他们将直接返回“登录”页面。我使用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";
        }
javascript ajax local-storage
4个回答
2
投票

尝试使用以下方法将对象保存在本地存储中(如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');
                }
            });
        });

1
投票

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

您可以从Chrome的开发工具中进行检查(Windows:Ctrl + Shift + i或macOs:command + option + i)>应用程序>存储>本地存储:

As you can see the value can be set null

您可以看到该值可以设置为空。

希望对您有帮助。


1
投票

localStorage仅支持字符串值。 response.access_token可能不是字符串值。因此,请尝试以下方法:

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

并且在检索时,

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


-1
投票

[好吧,我不知道这是否很幸运,但是当我关闭笔记本电脑并放了一段时间后,我再次打开它,现在它可以工作了。我非常感谢大家的帮助。祝大家有个美好的一天。

© www.soinside.com 2019 - 2024. All rights reserved.