Ionic2学习笔记(8):Local Storage& SQLite

作者:Grey

原文地址: http://www.cnblogs.com/greyzeng/p/5557947.html

?

? ?
?

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

?

LocalStorage

?

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

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

具体用法:

  • 进入项目目录:cd MyFirstApp
  • 在主页设置一个按钮,点击按钮,获取LocalStorage的数据并打印在控制台

    app/pages/home/home.html

    在app/pages/home/home.ts中增加一个处理方法:

    我们可以通过

    this.local = new Storage(LocalStorage);

    this.local.set(‘isLogin‘, false);

    来设置并保存isLogin的值

    并且通过:

    this.local.get(‘isLogin‘);

    来获取isLogin的值

  • 运行:ionic serve -l

    点击按钮,打开Chrome控制台,可以看到输出结果:

    ?

SQLite

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

  • 首先我们必须增加一个插件:进入项目目录:cd MyFirstApp

    运行:ionic plugin add https://github.com/litehelpers/Cordova-sqlite-storage

  • 在app/app.ts中,我们先初始化一些数据库信息:

  • 在app/pages/home/home.html中增加一个按钮和一个Label,点击按钮,将数据库dbname6中people这个表的第一条记录的firstname字段展示出来:

    app/pages/home/home.html

    在app/pages/home/home.ts中增加相应的方法来获取数据库中的数据:

  • 运行:ionic serve -l

    点击ShowData按钮:

    ?

更多:Use SQLite In Ionic 2 Instead Of Local Storage

------

上一篇:Ionic2学习笔记(7):Input

Ionic2学习笔记(8):Local Storage& SQLite

时间: 2024-08-06 03:42:49

Ionic2学习笔记(8):Local Storage& SQLite的相关文章

Ionic2学习笔记(9):访问本地设备

作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5559927.html ? ? ? ? Ionic2提供了访问本地设备的方法,但是需要安装Cordova依赖,我们以调用摄像头拍照为例来说明: 进入项目目录:cd MyFirstApp npm install ionic-native –save 增加调用Camera的插件:ionic plugin add cordova-plugin-carmera 在Home.html中,增加如下代码: 点击b

Ionic2学习笔记(10):扫描二维码

作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5575843.html 时间:6/11/2016 ? ? 说明: 在本文发表的时候(2016-06-11),Ionic2是beta版本,所有还是会有一些改动比较大的地方: 点击查看 , 比如beta8版本(2016-06-06),相较于前面的版本就有一个特别大的改动的地方: @App and @Page should be replaced with @Component 基于这种情况,大家还是静静

Ionic2学习笔记(7):Input

作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5554610.html ? ? ? 我们先来看一个简单的输入用户名和密码点击登录的界面: ? 进入项目目录:cd MyFirstApp 修改主页代码: app/pages/home/home.html 预览一下效果:ionic serve -l 我们有两种方式来获取输入的数据: ? 第一种:通过[(ngModel)]来获取参数值,修改home.html的代码为如下形式 在home.ts增加一个获取用

Ionic2学习笔记(6):NAVIGATION

作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5551535.html ? ? ? ?Ionic2中创建一个页面很方便,在页面之间相互切换也很方便,我们在实现如下需求: 在主页面创建一个按钮,点击按钮,跳转到一个新页面,在跳转过程中,我们可以也可以在页面之间传递数据. 进入项目目录:cd MyFirstApp 创建一个新页面: ionic g page SecondPage 将@import "../pages/second-page/secon

Ionic2学习笔记(3):Pipe

作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5538630.html ? ? ? ? ? ? Pipe类似过滤器,比如,在一个字符串要展现在页面之前, 我们需要对这个字符串进行一些操作,比如:将字符串转化为大写,加一个前缀/后缀-- Pipe的作用就是来实现类似的需求: 模型如下: ? ? ? 假设一个字符串: "hello", 我们在展示这个字符串的时候,需要先转换为大写, 然后加一个后缀 " WORLD", 最

Ionic2学习笔记(3):*号

作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5544479.html ? ? ? ? ? ? 大家常常会在ionic2页面中见到*号的存在,如: <p *ngIf="someBoolean"><p> 含义与: <template [ngIf]="someBoolean"> <p></p> </template> 一样, 即:如果someBool

Ionic2学习笔记(5):Provider

作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5547646.html ? ? Provider是一种为App提供数据源的方式, 举个例子: 我们从: https://www.reddit.com/r/gifs/top/.json?limit=10&sort=hot 获取Json格式的数据,并在程序启动的时候,在控制台打印获取的数据信息: 进入项目目录:cd MyFirstApp 创建一个Provider:ionic g provider New

iOS学习笔记16-数据库SQLite

一.数据库 在项目开发中,通常都需要对数据进行离线缓存的处理,如新闻数据的离线缓存等.离线缓存一般都是把数据保存到项目的沙盒中.有以下几种方式: 1. 归档:NSKeyedArchiver 2. 偏好设置:NSUserDefaults 3. plist存储:writeToFile 上述的使用可以参考iOS学习笔记15-序列化.偏好设置和归档,但上述三种方法都有一个致命的缺点,那就是都无法存储大批量的数据,有性能的问题,在这个时候就是使用数据库的时候. 数据库(Database)是按照数据结构来组

Android学习笔记(43):Java开发SQLite程序

正如前面一文说的,SQLite多用于嵌入式开发中,但有时为了更方便的编辑数据库文件,我们也常常需要开发在电脑上运行的SQLite程序.这种情况是经常发生的,比如在我们需要把一大批的txt文件中的数据插入到一个数据库中的时候. 还好这是很简单的,所以本文我们来学习如何用Java开发SQLite程序. (1)准备工作 下载sqlite-jdbc-版本号.jar文件,放到jre\lib\ext文件夹.如我的路径是C:\Program Files\Java\jre1.8.0_77\lib\ext. (2