Ionic2学习笔记（8）：Local Storage& SQLite

逃离我推掉我的手 2021-12-17 01:19 295阅读 0赞

## 作者：[Grey][] ##

# 原文地址： [http://www.cnblogs.com/greyzeng/p/5557947.html][http_www.cnblogs.com_greyzeng_p_5557947.html] #

Ionic2可以有两种方式来存储数据，Local Storage和SQLite

## LocalStorage ##

因为比较容易访问，所以不适合存比较敏感性的数据

比如可以存储: 用户是否登录的信息. 一些session信息等

具体用法：

*  进入项目目录：cd MyFirstApp 
 *  在主页设置一个按钮，点击按钮，获取LocalStorage的数据并打印在控制台 
    
    app/pages/home/home.html 
    
    ![683206-20160603235502571-1800111752.png][]
    
    在app/pages/home/home.ts中增加一个处理方法：
    
    我们可以通过 
    
    this.local = new Storage(LocalStorage); 
    
    this.local.set('isLogin', false); 
    
    来设置并保存isLogin的值 
    
    并且通过： 
    
    this.local.get('isLogin'); 
    
    来获取isLogin的值 
    
    ![683206-20160603235503555-42382298.png][]
 *  运行：ionic serve -l 
    
    ![683206-20160603235504133-650621459.png][]
    
    点击按钮，打开Chrome控制台，可以看到输出结果： 
    
    ![683206-20160603235504664-1886498683.png][]

## SQLite ##

我们还可以通过SQLite来存储数据，通过SQL语句来实现相关存储。

*  首先我们必须增加一个插件：进入项目目录：cd MyFirstApp 
    
    运行：ionic plugin add [https://github.com/litehelpers/Cordova-sqlite-storage][https_github.com_litehelpers_Cordova-sqlite-storage]
 *  在app/app.ts中，我们先初始化一些数据库信息： 
    
    ![683206-20160603235505180-1340836542.png][]
 *  在app/pages/home/home.html中增加一个按钮和一个Label，点击按钮，将数据库dbname6中people这个表的第一条记录的firstname字段展示出来： 
    
    app/pages/home/home.html 
    
    ![683206-20160603235505821-925725877.png][]
    
    在app/pages/home/home.ts中增加相应的方法来获取数据库中的数据： 
    
    ![683206-20160603235506242-1974496763.png][]
 *  运行：ionic serve -l 
    
    ![683206-20160603235506992-1829892766.png][]
    
    点击ShowData按钮： 
    
    ![683206-20160603235508071-1244454971.png][]

更多：[Use SQLite In Ionic 2 Instead Of Local Storage][]

\------

上一篇：[Ionic2学习笔记（7）：Input][Ionic2_7_Input]

下一篇：[Ionic2学习笔记（9）：访问本地设备][Ionic2_9]

转载于:https://www.cnblogs.com/greyzeng/p/5557947.html

[Grey]: http://www.cnblogs.com/greyzeng/
[http_www.cnblogs.com_greyzeng_p_5557947.html]: http://www.cnblogs.com/greyzeng/p/5557947.html
[683206-20160603235502571-1800111752.png]: /images/20211214/1ebf484dc105425c99ee085d84ec12e2.png
[683206-20160603235503555-42382298.png]: /images/20211214/9ba81480b3bc4f98863088cf793f8601.png
[683206-20160603235504133-650621459.png]: /images/20211214/e53efb13e5274e23bc2e284bfa4f9b9d.png
[683206-20160603235504664-1886498683.png]: /images/20211214/86342d4223f84eeaaf597a6bcb732f93.png
[https_github.com_litehelpers_Cordova-sqlite-storage]: https://github.com/litehelpers/Cordova-sqlite-storage
[683206-20160603235505180-1340836542.png]: /images/20211214/f459b441ee944569bc55c4912240fc65.png
[683206-20160603235505821-925725877.png]: /images/20211214/dbd224909bd14c648484516fe74b654f.png
[683206-20160603235506242-1974496763.png]: /images/20211214/25145b72594444ef890d002496a36e11.png
[683206-20160603235506992-1829892766.png]: /images/20211214/2dff6338467249c18878981889fcbf10.png
[683206-20160603235508071-1244454971.png]: /images/20211214/a3d37b799e114e76965794ed15309457.png
[Use SQLite In Ionic 2 Instead Of Local Storage]: https://www.thepolyglotdeveloper.com/2015/12/use-sqlite-in-ionic-2-instead-of-local-storage/
[Ionic2_7_Input]: http://www.cnblogs.com/greyzeng/p/5554610.html
[Ionic2_9]: http://www.cnblogs.com/greyzeng/p/5559927.html