Implementing Session Storage in Angular 8 Applications: A Movie App Click Counter Case Study

Introduction and Problem Context

In modern web application development, data persistence is crucial for enhancing user experience. Particularly in single-page applications (SPAs) built with frameworks like Angular, maintaining state data during page refreshes or navigation presents common challenges. This article explores how to reliably implement data storage using HTML5's sessionStorage API in Angular 8 applications, based on a practical case study of a button click counter in a movie application.

Fundamentals of sessionStorage

sessionStorage is part of the Web Storage API, allowing key-value pair storage during browser sessions. Unlike localStorage, sessionStorage data is only available in the current browser tab and is automatically cleared when the tab closes. Its API is designed with simplicity, featuring three core methods:

// Store data
sessionStorage.setItem('key', 'value');

// Retrieve data
const value = sessionStorage.getItem('key');

// Remove data
sessionStorage.removeItem('key');

All stored values must be strings. For complex objects, use JSON.stringify() for serialization and JSON.parse() for deserialization when reading.

Case Analysis and Problem Diagnosis

In the original code, the developer attempted to store button click counts using sessionStorage in the CountClicks directive:

@HostListener("click", ["$event.target"])
onClick(btn): void {
  if(sessionStorage.getItem(btn.id)){
    this.number = sessionStorage.getItem(btn.id);
  }
  sessionStorage.setItem(btn.id, btn.innerHTML);
  btn.innerHTML = sessionStorage.getItem(btn.id);
}

This code exhibits several critical issues: First, it stores the button's innerHTML (e.g., "Likes 1") rather than pure numeric values, complicating subsequent processing. Second, the data retrieval logic executes after storage, failing to fully utilize saved data. Most importantly, data is not restored from sessionStorage during page initialization, causing resets upon refresh.

Solution Implementation

Guided by the best answer, we refactor the directive implementation:

import { Directive, HostListener, OnInit } from "@angular/core";

@Directive({ selector: "a[counting]" })
export class CountClicksDirective implements OnInit {
  private clickCount = 0;
  private buttonId: string;

  ngOnInit() {
    // Restore data from sessionStorage on initialization
    const savedCount = sessionStorage.getItem(this.buttonId);
    if (savedCount) {
      this.clickCount = parseInt(savedCount, 10);
      this.updateButtonText();
    }
  }

  @HostListener("click")
  onClick(): void {
    this.clickCount++;
    // Immediately save to sessionStorage
    sessionStorage.setItem(this.buttonId, this.clickCount.toString());
    this.updateButtonText();
  }

  private updateButtonText(): void {
    const button = document.getElementById(this.buttonId);
    if (button) {
      button.textContent = `Likes ${this.clickCount}`;
    }
  }
}

In the component template, ensure each button has a unique ID:

<a counting [attr.id]="'movie-' + movie.id">Likes 0</a>

sessionStorage vs. localStorage Comparison

As supplementary reference, Answer 2 details the distinctions between both storage types:

• Scope: sessionStorage is limited to the current tab, while localStorage is shared across browser tabs
• Lifetime: sessionStorage clears when the tab closes, whereas localStorage requires manual clearance
• Storage Limits: Typically ~5MB for sessionStorage and ~10MB for localStorage
• Use Cases: sessionStorage suits temporary session data, localStorage fits long-term preference settings

For movie like functionality, sessionStorage is more appropriate as like data only needs to persist during the current viewing session.

Best Practices and Considerations

1. Data Type Handling: Always explicitly handle data type conversions. sessionStorage only stores strings, requiring explicit conversion for numbers:

// Store
sessionStorage.setItem('clicks', count.toString());
// Retrieve
const count = parseInt(sessionStorage.getItem('clicks') || '0', 10);

2. Error Handling: Implement appropriate error handling mechanisms:

try {
  sessionStorage.setItem(key, value);
} catch (e) {
  console.error('Storage failed:', e);
  // Fallback to in-memory storage or alternative solutions
}

3. Performance Optimization: Avoid frequent storage operations; consider debouncing or batch update strategies.

4. Security Considerations: Sensitive data should not be stored in sessionStorage, as all scripts under the same origin can access it.

Debugging and Verification

Use browser developer tools to verify storage effectiveness:

1. Open Chrome DevTools (F12)
2. Navigate to the Application tab
3. Select Session Storage under the Storage section
4. Verify key-value pairs are correctly stored and updated

This helps confirm data persistence as expected and proper restoration after page refreshes.

Conclusion

Through judicious use of sessionStorage, Angular applications can achieve simple yet effective client-side data persistence. The click counter case study presented, while straightforward, reveals core concepts of state management, data serialization, and lifecycle coordination. Developers should make informed choices between sessionStorage and localStorage based on specific requirements, adhering to best practices to ensure application reliability and performance. As web storage standards evolve, these technologies will continue to play vital roles in modern web applications.