Contents
การเก็บข้อมูลของ localStorage
เก็บในลักษณะของ key/value
- การเขียนและอ่านข้อมูลจาก
localStorage
- การอ่านข้อมูลจาก
localStorage
โดยที่ยังไม่มี key นั้นอยู่ - การอ่านข้อมูลจาก
localStorage
ที่มี key นั้นเก็บอยู่ - การลบ localStorage โดยการกำหนด key
สร้างโปรเจ็กส์ใหม่ชื่อ localStorage
[code]
> ionic start localStorage blank
> cd localStorage
> ionic serve
[/code]
1. การเขียนและอ่านข้อมูลจาก localStorage
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { constructor(public navCtrl: NavController) { localStorage.setItem('username', "jack"); let username = localStorage.getItem('username'); } } |
บรรทัดที่ 12: เขียนข้อมูลลง localStorage
โดยมี key ชื่อ username
บรรทัดที่ 13: อ่านข้อมูลจาก localStorage
ที่มี key ชื่อ username
2. การอ่านข้อมูลจาก localStorage
โดยที่ยังไม่มี key นั้นอยู่
อ่าน username
จาก localStorage
โดยที่ยังไม่ได้เก็บข้อมูล username
ลง localStorage
จะได้ค่า null
กลับมา
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { constructor(public navCtrl: NavController) { let username = localStorage.getItem('username'); if (username == null) { console.log("username is null"); } else { console.log("username is " + username); } } } |
ผลการรัน กด F12 ดู
[code]
username is null
[/code]
3. การอ่านข้อมูลจาก localStorage
ที่มี key นั้นเก็บอยู่
เพิ่มคำสั่งเขียนข้อมูล username
ลง localStorage
อ่าน username
จาก localStorage
อีกครั้งคราวนี้จะได้ข้อมูลละ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { constructor(public navCtrl: NavController) { localStorage.setItem('username', "jack"); let username = localStorage.getItem('username'); if (username == null) { console.log("username is null"); } else { console.log("username is " + username); } } } |
ผลการรัน กด F12 ดู
[code]
username is jack
[/code]
4. การลบ localStorage
โดยการกำหนด key
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { constructor(public navCtrl: NavController) { localStorage.setItem('username', "jack"); localStorage.removeItem('username'); let username = localStorage.getItem('username'); if (username == null) { console.log("username is null"); } else { console.log("username is " + username); } } } |
บรรทัดที่ 13: ลบ localStorage item ด้วยคำสั่ง localStorage.removeItem()
ผลการรัน กด F12 ดู
[code]
username is null
[/code]
Link