HTML5储存

1、sessionStorage

特点：关闭浏览器（或标签页）后数据就不存在了。但刷新页面或使用“前进”、“后退按钮”后sessionStorage仍然存在；

　　　sessionStorage每个窗口的值都是独立的（每个窗口都有自己的数据），它的数据会随着窗口的关闭而消失，窗口间的sessionStorage也是不可以共享的;

　　　储存大小4M。

方法：setItem(key, value)  getItem(key)  removeItem(key)。

2、localStorage

特点：localStorage把只把数据存储在了客户端使用，不会发送的服务器上（除非你故意这样做）

　　　而且对于某一个域下来说，local storage是共享的（多个窗口共享一个“数据库”）

　　　localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

方法类似于sessionStorage

应用：

 (function(owner) {
     /**
      * 用户登录
      **/
     owner.login = function(loginInfo, callback) {
         callback = callback || $.noop;
         loginInfo = loginInfo || {};
         loginInfo.account = loginInfo.account || '';
         loginInfo.password = loginInfo.password || '';
         if (loginInfo.account.length < 5) {
             return callback('账号最短为 5 个字符');
         }
         if (loginInfo.password.length < 6) {
             return callback('密码最短为 6 个字符');
         }
         var users = JSON.parse(localStorage.getItem('$users') || '[]');
         var authed = users.some(function(user) {
             return loginInfo.account == user.account && loginInfo.password == user.password;
         });
         if (authed) {
             return owner.createState(loginInfo.account, callback);
         } else {
             return callback('用户名或密码错误');
         }
     };

     owner.createState = function(name, callback) {
         var state = owner.getState();
         state.account = name;
         state.token = "token123456789";//状态码
         owner.setState(state);
         return callback();
     };

     /**
      * 新用户注册
      **/
     owner.reg = function(regInfo, callback) {
         callback = callback || $.noop;
         regInfo = regInfo || {};
         regInfo.account = regInfo.account || '';
         regInfo.password = regInfo.password || '';
         if (regInfo.account.length < 5) {
             return callback('用户名最短需要 5 个字符');
         }
         if (regInfo.password.length < 6) {
             return callback('密码最短需要 6 个字符');
         }
         if (!checkEmail(regInfo.email)) {
             return callback('邮箱地址不合法');
         }
         var users = JSON.parse(localStorage.getItem('$users') || '[]');
         users.push(regInfo);
         localStorage.setItem('$users', JSON.stringify(users));
         return callback();
     };

     /**
      * 获取当前状态
      **/
     owner.getState = function() {
         var stateText = localStorage.getItem('$state') || "{}";
         return JSON.parse(stateText);
     };

     /**
      * 设置当前状态
      **/
     owner.setState = function(state) {
         state = state || {};
         localStorage.setItem('$state', JSON.stringify(state));
         //var settings = owner.getSettings();
         //settings.gestures = '';
         //owner.setSettings(settings);
     };

     var checkEmail = function(email) {
         email = email || '';
         return (email.length > 3 && email.indexOf('@') > -1);
     };

     /**
      * 找回密码
      **/
     owner.forgetPassword = function(email, callback) {
         callback = callback || $.noop;
         if (!checkEmail(email)) {
             return callback('邮箱地址不合法');
         }
         return callback(null, '新的随机密码已经发送到您的邮箱，请查收邮件。');
     };

     /**
      * 获取应用本地配置
      **/
     owner.setSettings = function(settings) {
         settings = settings || {};
         localStorage.setItem('$settings', JSON.stringify(settings));
     }

     /**
      * 设置应用本地配置
      **/
     owner.getSettings = function() {
             var settingsText = localStorage.getItem('$settings') || "{}";
             return JSON.parse(settingsText);
         }

 }(window.app = {}));

上述代码可以应用于H5 app的用户登录。不断的通过localStorage的setItem与getItem方法来存储用户的登陆信息。

 //登陆
 var loginInfo = {
     account: user.value,
     password: password.value
 };
 app.login(loginInfo, function(err) {
     if (err) {
         plus.nativeUI.toast(err);
         return;
     }
    //上传服务器
 });