Zapisywanie ustawień w przeglądarce; fasada dla localStorage lub sessionStorage

Moja gra The Ship Game nie wymaga back-endu w postaci serwera bazą danych. Jak zapisać dane bez bazy danych? Można postawić na to co daje nam współczesna przeglądarka i jej JavaScriptowe obiekty localStorage oraz sessionStorage.

Gdy popatrzymy na interfejs obiektów typu Storage, czyli localStorage i sessionStorage to on wygląda on następująco.

Notacja z typami według TypeScriptu

• length: number – właściwość tylko do odczytu. Zwraca ilość danych przechowywanych w Storage.
• clear(): void – czyści cały Storage z danych.
• key(index: number): string – Zwraca i-ty klucz z Storage.
• getItem(keyName: string): string – Wyciąga wartość pod kluczem keyName.
• setItem(keyName: string, keyValue: string): void – Zapisuje wartość keyValue pod kluczem keyName.

Fajny interfejs do zapisywania stringów do bazy. A co z obiektami? Jakbym chciał zapisać takie coś:

{
    fistName: 'Pawel'
    lastName: 'Soltysiak'
}

w localStorage, to jak? Przeglądarki dostarczają metody takie jak JSON.stringify, które przerabiają obiekt na string oraz JSON.parse zmieniające string na obiekt.

W celu ułatwienia sobie życia przygotowałem klasę, która tą konwersję pomiędzy string<->object zamyka w wygodnych do użyciach metodach get(key: string): {} oraz set(key: string, value: {}): void.

Hejtuje nulle

Sir Tony Hoare, stworzył null-referencje. Ten pomysł nazywa
pomyłką o wartości milliarda dolarów.

JavaScript popełnił pomyłkę wartą 10 miliardów dolarów dodając do nulla jeszcze wartość undefined. Obecnie często jedną z zasad statycznych analizatorów kodu takich jak TsLint jest wykrywanie nulla bądź undefined i zgłaszanie go jako niezgodnego z zasadami panującymi w projekcie.

Dodałem regułę "no-null-keyword": true, do tslint.json zgodnie z zaleceniami ludzi piszących TypeScript.