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<T>(key: string): T {
        let value: string = localStorage.getItem(key);        if (value && value != "undefined" && value != "null") {            return <T>JSON.parse(value);
        }        return null;
    }

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

    sessionRead<T>(key: string): T {
        let value: string = sessionStorage.getItem(key);        if (value && value != "undefined" && value != "null") {            return <T>JSON.parse(value);
        }        return null;
    }
}

3.使用

在需要的页面

import { StorageServiceProvider } from 'xxx'; constructor(private storageService:StorageServiceProvider ) {}//写入this.storageService.write('key','value');//读取this.storageService.read('key');

作者：No刹那光辉
链接：https://www.jianshu.com/p/565317ed16ff