如何使用localStorage存储和获取用户登录详细信息？

Question

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

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

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

credentials Object {username: "leon", password: "sushi"}

我的console.logs打印在下面：

我的loginController：

// 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（'key'）;

记住一些事情，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()以获取用户