ionic3.x开发之LocalStorage

LocalStorage介绍：

• LocalStorage 生命周期是永久，数据是没有过期时间的，只要它没有被删除，就会永久地储存在 Storage 中。
• sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。
• 相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息
• LocalStorage 和 SessionStorage 的存储空间只有 5MB，请不要存储大量的数据。
• storage事件：当存储的storage数据发生变化时都会触发它，Storage 事件可以使用 W3C 标准的注册事件方法 addEventListenter 进行注册监听。
• 建议不要使用localStorage方式存储敏感信息

LocalStorage服务封装：

命令创建LocalStorage服务：

ionic g provider localStorage

代码如下：

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

/*
  Generated class for the LocalStorageProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/
@Injectable()
export class LocalStorageProvider {
  public static  STATION_INFO="station_info";
  constructor(public http: HttpClient) {
    console.log('Hello LocalStorageProvider Provider');
  }

  //存储
  set(key,value){
    console.log(">>>>>>存储<<<<<<<");
    console.log("key",key);
    console.log("value",value);
    localStorage.setItem(key,JSON.stringify(value)); //对象转换成字符串并存储,key存在时更新
  }

  //获取
  get(key){
    console.log(`get----------->${localStorage.getItem(key)}`);
    return JSON.parse(localStorage.getItem(key)); //字符串转换成对象并返回，key不存在，返回null
  }

  //移除
  remove(key){
    localStorage.removeItem(key);//移除key后，对应的值是null
  }

  //清除所有-----慎用！（执行的后果是会清除所有localStorage对象保存的数据）
  clear(){
    localStorage.clear();
  }

  //获取键值对的个数,可根据索引取出key和value
  getLength(){
    console.log(localStorage.length);
    for(var i=0;i<localStorage.length;i++){

      var name = localStorage.key(i)​;
      console.log(name);
      var value = localStorage.getItem(name);​
      console.log(value);

 }
    return localStorage.length;
  }

  //存过期时间的方法
  setForExp(key, value) {
    var curTime = new Date().getTime();
    localStorage.setItem(key, JSON.stringify({ data: value, time: curTime }));
  }

  //指定过期时间的get方法;1000*60:过期时间为1分钟
  getWithExp(key, exp) {
    var data = localStorage.getItem(key);
    var dataObj = JSON.parse(data);
    if (new Date().getTime() - dataObj.time > exp) {
      console.log('信息已过期');
    } else {
      var dataObjDatatoJson = JSON.parse(dataObj.data)
      return dataObjDatatoJson;
    }
  }
}

使用方法;

1.在app.module.ts中导入并添加到providers:

import { LocalStorageProvider } from '../providers/local-storage/local-storage';

QQ20180729-185137@2x.png

2.在需要的地方使用：

import { LocalStorageProvider } from './../local-storage/local-storage';
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

/*
  Generated class for the UserStorageProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/
@Injectable()
export class UserStorageProvider {

  constructor(private storage:LocalStorageProvider) {

  }
  saveUser(userInfo) {
    console.log(">>>>>saveUser userInfo : " + userInfo);
    this.storage.set("userInfo", userInfo);
  }
  getCurrentUser() {
    return this.storage.get("userInfo");
  }
  removeUser(){
    this.storage.remove("userInfo");
  }
}