How to auto expire local storage values in angular js?

Question

I am using localStorage in my application. I want to clear those values after 20 minutes. Can u please help me out?

Answer 1

I wrote an extension for angular-localStorage (https://github.com/grevory/angular-local-storage) that is able to delete entries in localStorage automatically when you provide an optional parameter in the set method.

https://gist.github.com/Kyoss79/8cd37a54679804fdeb6d

Answer 2

after bootstraping your module call run and setup an $interval that clears local storage after 20 minutes.

app.run(function($interval){
  $interval(() => {
    delete localStorage[key]
    // delete all the required localStorage variables by specifying their keys
  }, 1000*60*20)
})

Answer 3

According to W3Schools:

The localStorage object stores the data with no expiration date. The data will not be deleted when the browser is closed, and will be available the next day, week, or year.

However, a similar question has already been asked and answered elsewhere: When do items in HTML5 local storage expire? There were some workarounds mentioned there that may be of use to you.

Answer 4

You can have a custom generic implementation in one cache service or local storage service. Here is what worked for me.

import { Injectable } from '@angular/core';
// using ionic angular storage
import { Storage } from '@ionic/storage-angular'; 

export class CachedItem<T> {
  public _value: T | undefined;
  public _expiry: any;

  constructor(private name: string) { }

  public setValue(value: T) {
    this._value = value;
    this._expiry = new Date().getTime() + 1800000; // 30 mins 
  }
}

@Injectable({
  providedIn: 'root'
})
export class LocalStorageService {
  private _storage: Storage | null = null;

  constructor(private storage: Storage) {
  }

  async init() {
    const storage = await this.storage.create();
    this._storage = storage;
  }
 
  private async CheckStorage() {
    if (!this._storage) {
      this._storage = await this.storage.create();
    }
  } 

  // Generic cache with expiry 
  public async setCache<T>(key: string, items: T) {
    let cachedItem = new CachedItem<T>(key);
    cachedItem.setValue(items);

    await this.CheckStorage();
    return await this._storage?.set(key, cachedItem);
  }

  public async getCache<T>(key: string) {
    await this.CheckStorage();
    const cashedItem: CachedItem<T> = await this._storage?.get(key);
    if (cashedItem !== null) {
      if (new Date().getTime() > cashedItem._expiry) {
        // If the item is expired, delete the item from storage  and return null
        await this._storage?.remove(key);
        return null
      }
      return cashedItem._value as T;
    }

    return null;
  }

}

You can use it like the one below

async loadData() {

    // gets the cache
    var datas: MyDataType[] = await this.localStorageService.getCache('datacachekey');
    if (datas == null) { // not available in the cache, go fetch and put into the cache
      
      this.myDataService.getDatasFromApi().subscribe(
        (myData) => {
          // sets the cache
          await this.localStorageService.setCache('datacachekey', myData); 

          // work on the data 
        },
        () => {
          //error;
        }
      );

    }
    else {
       // work on the data as received from cache
    }
  }