Trying to use ngrx-store-localstorage in nativescript-angular mobile app causes 'localStorage is not defined'

Question

ReferenceError: localStorage is not defined

File: "finle:///data/data/org.nativescript/dist/index.js. line 104, column: 40

StackTrace: Frame: function:'exports.localStorageSync',file:'file:///data/data/org.nativescript.MyApp/files/app/tns_modules/ngrx-store-localstorage/dist/index.js',line:104,column:41 Frame: finction:",file:'file:///data/data/org.nativescript.MyApp/files/app/core/store/index.js',line:19,column:69

Is it must to use https://www.npmjs.com/package/nativescript-localstorage or Can we use https://github.com/natural-apptitude/ngrx-store-ionic-storage or ngrx-store-localstorage

Answer 1

NativeScript doesn't have LocalStorage. You have to install a shim.

tns plugin add nativescript-localstorage

Then at the top of your app.module.ts before you initialize ngrx:

import 'nativescript-localstorage';

This should allow ngrx-store-localstorage to work.

Read the docs at: https://github.com/NathanaelA/nativescript-localstorage

Answer 2

you have to do three steps

1 install the plugin

tns plugin add nativescript-localstorage

2 import it in app.module.ts

import 'nativescript-localstorage';

3 use it in the corresponding component

import { Component, OnInit } from "@angular/core";
import { DataService, IDataItem } from "../core/data.service";
require( "nativescript-localstorage" );
@Component({
....
})

 export class HomeComponent implements OnInit {
 ......
}