javascript - 如何使用 localStorage 存储和取回用户登录信息？

Question

我正在使用 Ionic framework 构建移动应用程序，我需要能够缓存用户的登录信息，这样他们就不必每次都登录。

我read a solution建议使用 HTML5 localStorage .但是我目前不确定如何实现它。

这是我的用户登录变量的样子:

凭证对象{用户名:“leon”，密码:“sushi”}

下面是我的 console.logs 打印的内容:

我的登录 Controller :

// The Modernizr Code
////////////////////////////////////////////////////////////////////////////
if (Modernizr.localstorage) {
    // window.localStorage is available!
    console.log('localStorage is available!');
    console.log('creds',creds);

} else {
    console.log('no native support for HTML5 storage :(');
    // no native support for HTML5 storage :(
    // maybe try dojox.storage or a third-party solution
}

// The Login function
////////////////////////////////////////////////////////////////////////////
function login(credentials) {
    console.log('credentials',credentials);
    creds = localStorage["credentials"];
    console.log('creds',creds);
    AuthService.login(credentials).then(function (user) {
        $rootScope.$broadcast(AUTH_EVENTS.loginSuccess);

        if (user.password_reset) {
            $location.path('/password');
        }
        else {
            AuthService.saveUser(user);
            $location.path('/main');
        }

    }).catch(function () {
        vm.errorModalClosed = false;
        vm.loginError       = true;     
        PopupFactory.saveConfig("failure", "The username and password you entered don’t match.", true);
        $rootScope.$emit('open.popup');
    });
}

Answer 1

localStorage 在浏览器中是全局的，你可以保存数据然后在任何你想要的地方检索，你添加这样的项目 localStorage.setItem('key', 'value') 并获取 localStorage.getItem( '键');

记住一点，localStorage 只保存字符串，你必须使用 JSON.stringify() 来保存一个对象 y JSON.parse再次解析为json

在您保存用户的那一刻的具体示例中

AuthService.saveUser(user);
localStorage.setItem('user', JSON.stringify(user));
$location.path('/main');

并在其他地方检索

var user = JSON.parse(localStorage.getItem('user'));

您也可以在 AuthServer.saveUser(user) 中执行此操作并添加一些方法，如 AuthServer.getUser() 以获取用户