ionic 封装H5本地储存

本来是不打算发这篇文章的，但是最近很多人使用了官网提供的Storage，基本上都会烦恼get/set数据异步返回问题（由于使用了IndexedDB和WebSQL），所以我就决定分享一下我的代码。虽然官网的提供的相对比较智能（优先级：IndexedDB> WebSQL>localstorage)。但是如果只是存储一些简单的key/value的话，我还是会选择自己封装的方式，因为受不了异步返回。

1. 控制台输入命令创建用来存储的provider

$ ionic g provider StorageService

2. 封装函数

打开providers目录下的storage-service.ts,修改如下

import { Injectable } from '@angular/core';

@Injectable()
export class StorageServiceProvider {

    constructor() {}

    write(key: string, value: any) {
        if (value) {
            value = JSON.stringify(value);
        }
        localStorage.setItem(key, value);
    }

    read(key: string): T {
        let value: string = localStorage.getItem(key);

        if (value && value != "undefined" && value != "null") {
            return JSON.parse(value);
        }

        return null;
    }

    sessionWrite(key: string, value: any) {
        if (value) {
            value = JSON.stringify(value);
        }
        sessionStorage.setItem(key, value);
    }

    sessionRead(key: string): T {
        let value: string = sessionStorage.getItem(key);

        if (value && value != "undefined" && value != "null") {
            return JSON.parse(value);
        }

        return null;
    }
}

3.使用

在需要的页面

import { StorageServiceProvider } from 'xxx';

 constructor(private storageService:StorageServiceProvider ) {}

//写入
this.storageService.write('key','value');
//读取
this.storageService.read('key');