下面说说ionic3[7]LocalStorage的使用——以登录和注销为例

一般来说，互联网APP中的数据主要是和服务端进行交互，但是对于一些数据，我们希望在获取之后保存起来，并在全局环境中使用，例如用户数据——我们不想在每个页面上从服务器中提取它。这时候我们可以使用HTML5的localStorageAPI——一种比cookie更稳定高效的存储机制，跨浏览。我们可以尝试模拟登录过程来体验这个API的使用。创建登录页面在pages文件夹下创建登录页面目录login，包括login.ts和login.html，别忘了在app.module.ts中注册页面。一个简单的登录表单定义了数据模型。表单的数据模型定义在login.ts中，用户名和密码封装在一个对象中，以后发送post请求时直接调用即可。exportclassLoginPage{userData:any{username:'',password:''}...制作模板并完成数据绑定在login.html中编写表单模板，使用[(ngModel)]绑定on中的每一项数据模型。需要先做一些小改动许多应用程序需要强制登录。用户进入此类应用时，会直接进入登录页面。登录成功后才会跳转到首页。如果使用tabs模板创建ionic项目，则APP默认进入Tabs页面。我们需要做一些修改，让它默认进入登录页面。修改app.component.tsapp.component.ts定义整个APP的根页面，我们需要将根页面替换为登录页面。引入LoginPageimport{LoginPage}from'../pages/login/login';将rootPage更改为LoginPagerootPage:any=LoginPage;运行服务器后，可以看到应用程序直接进入登录界面，使用LocalStorage存储登录状态。在LoginPage中创建登录方法在类中创建登录方法模拟登录过程：login(){//模拟认证登录if(this.userData.username==='test'&&this.userData.password==='123456'){//将用户名存储到localStoragewindow.localStorage.setItem('username',this.userData.username);this.navCtrl.setRoot(TabsPage);}}假设用户名为test，密码为123456，当两者匹配时，将用户名存入Storage，并跳转到Tabs页面。注意：引入TabsPageimport{TabsPage}from'../tabs/tabs';类中注入NavController:constructor(privatenavCtrl:NavController){}绑定点击事件将组件中的点击方法绑定到模板按钮的事件中：loginAngularmedium（事件名称）用于将模板上的元素与被绑定组件中的方法进行绑定，即事件流从模板传递到组件，因为组件中的方法是对外不可见，所以不要用onclick操作。[来拉点ionic3[2]页面，珍惜这段关系](http://www.jianshu.com/p/de40...NavController的push方法跳转到页面，为什么要用setRoot而不是push这里还有一个方法setRoot呢，因为这两个方法的原理不同，push是把新页面push到页面栈，新页面可以pop回旧页面；而setRoot是替换原来的根页面有了新的页面就相当于换了一个新的页面栈，原来的页面已经被回收了，这时候新页面是不能弹出回旧页面的，从界面性能上来说，如果输入Tabs页面通过push，可以使用Android设备上的后退按钮返回登录页面，这显然不符合我们的操作逻辑，登录成功后，我们需要在其他页面使用用户的数据，使用getItem来提取它就去做exportclassHomePage{username:string="";constructor(publicnavCtrl:NavController){}ionViewWillEnter(){this.username=window.localStorage.getItem('username');}}将用户名输出到模板：

Welcometoyou:{{username}}

使用登录状态跳转到页面。在测试过程中，你会发现每次刷新浏览器都要重新登录。这时需要修改这里的app.component.ts，增加一个hook：判断username是否存在于Storage中，定义不同的rootPage：exportclassMyApp{rootPage:any;构造函数（平台：平台，statusBar：StatusBar，splashScreen：SplashScreen）{if（window.localStorage.getItem（'用户名'））this.rootPage=TabsPage;否则this.rootPage=LoginPage；platform.ready().then(()=>{...可以重新刷新页面发现APP直接进入首页清空Storage中的用户信息，在首页添加注销按钮,清空Storage中的用户名,并跳转回登录页面padding>

欢迎：{{username}}

Logout其他没有过期时间LocalStorage数据，只要不被删除，就会永久保存在Storage中，如果希望数据在一定时间内过期，可以使用SessionStorage来替换，LocalStorage和SessionStorage的存储空间只有5MB，请不要存储大量数据，在新版本的iOS中，系统清内存时LocalStorage可能会被清空，Android中也可能会出现LocalStorage被清空的情况，如果需要更换更好的存储方案,请考虑改用SQLlite。