แก้ปัญหากด F5 แล้วข้อมูลหายด้วย NGXS
บทความนี้เป็นบทความต่อเนื่องจาก บทความที่แล้วนะครับ อ่านบทความที่แล้วได้ที่ นี่นะครับ
เนื่องจากมี req จากผู้ใช้งานว่าอยากให้เมื่อกด F5 แล้วข้อมูลยังคงอยู่ไม่หายไป ไม่อยากเริ่ม key ใหม่ตั้งแต่แรก ก็เชื่อว่าเป็นโจทย์ที่เพื่อนๆ นักพัฒนา Software เจอกันอยู่บ่อย ๆ ซึ่งก็มีวิธีการแก้ปัญหาหลายอย่าง
ซึ่งในบทความนี้เราจะมาแนะนำเทคนิคง่าย ๆ เพื่อจะช่วยให้แก้ปัญหาเรื่องที่ผู้ใช้งานกด F5 แล้วข้อมูลยังคงอยู่โดยที่เราแทบไม่ต้องแก้ code เราเลยหากเราใช้ NGXS อยู่แล้วเราแค่ติดตั้ง plugins เพิ่มเข้าไป 1 ตัวเท่านั้นเองครับ
เริ่มต้นติดตั้ง plugins ที่ชื่อ Storage เข้าไปด้วยคำสั่งดังนี้นะครับ
npm install @ngxs/storage-plugin --saveหลังจากติดตั้ง plugins เสร็จแล้วก็ไปเรียกใช้ที่ app.module.ts ดังนี้นะครับ
import { NgxsModule } from '@ngxs/store';
import { NgxsStoragePluginModule } from '@ngxs/storage-plugin';@NgModule({
imports: [
NgxsModule.forRoot([CounterState]),
NgxsStoragePluginModule.forRoot({
key: [CounterState]
})]
})
export class AppModule {}
ตัว storage นั้น default จะเก็บใน localStroage แต่ถ้าเพื่อน ๆ ท่านใดอยากเก็บแบบ sessionStorage ก็สามารถตั้งค่าได้ดังนี้ครับ
import { NgxsModule } from '@ngxs/store';
import { NgxsStoragePluginModule, StorageOption }
from '@ngxs/storage-plugin';@NgModule({
imports: [
NgxsModule.forRoot([CounterState]),
NgxsStoragePluginModule.forRoot({
key: [CounterState],
storage: StorageOption.SessionStorage
})
})
export class AppModule {}
ซึ่งหลังจากที่ได้ใช้มาในหลาย ๆ โปรเจ็คก็พบว่าตัว NGXS ตอบโจทย์ในหลาย ๆ ด้านโดยเฉพาะเรื่องของ plugins นั้นมีเตรียมไว้ให้ค่อนข้างครบถ้วน สำหรับท่านใดที่ลองทำตามแล้วไม่ได้ หรือว่าติดขัดอย่างไรสามารถเข้ามาพูดคุยแลกเปลี่ยนกันได้ที่ facebook : pnpsolutionหรือ web site : www.pnpsw.comได้ครับ
