Merge pull request #226 from joshnuss/optional-sync

Adds option to disable syncing across tabs

README.md

@@ -47,7 +47,8 @@ import * as devalue from 'devalue'
 // third parameter is options.
 export const preferences = persisted('local-storage-key', 'default-value', {
   serializer: devalue, // defaults to `JSON`
-  storage: 'session' // 'session' for sessionStorage, defaults to 'local'
+  storage: 'session', // 'session' for sessionStorage, defaults to 'local'
+  syncTabs: true // choose wether to sync localStorage across tabs, default is true
 })
 ```
 

index.ts

@@ -23,7 +23,8 @@ export type StorageType = 'local' | 'session'
 
 export interface Options<T> {
   serializer?: Serializer<T>
-  storage?: StorageType
+  storage?: StorageType,
+  syncTabs: boolean
 }
 
 function getStorage(type: StorageType) {
@@ -38,6 +39,7 @@ export function writable<T>(key: string, initialValue: T, options?: Options<T>):
 export function persisted<T>(key: string, initialValue: T, options?: Options<T>): Writable<T> {
   const serializer = options?.serializer ?? JSON
   const storageType = options?.storage ?? 'local'
+  const syncTabs = options?.syncTabs ?? true
   const browser = typeof(window) !== 'undefined' && typeof(document) !== 'undefined'
   const storage = browser ? getStorage(storageType) : null
 
@@ -53,7 +55,7 @@ export function persisted<T>(key: string, initialValue: T, options?: Options<T>)
         set(<T>serializer.parse(json))
       }
 
-      if (browser && storageType == 'local') {
+      if (browser && storageType == 'local' && syncTabs) {
         const handleStorage = (event: StorageEvent) => {
           if (event.key === key)
             set(event.newValue ? serializer.parse(event.newValue) : null)

test/localStorageStore.test.ts

@@ -206,6 +206,22 @@ describe('persisted()', () => {
 
       unsub()
     })
+
+    it("doesn't update, when syncTabs option is disabled", () => {
+      const store = persisted('myKey13', 1, { syncTabs: false })
+      const values = []
+
+      const unsub = store.subscribe((value) => {
+        values.push(value)
+      })
+
+      const event = new StorageEvent('storage', {key: 'myKey13', newValue: '2'})
+      window.dispatchEvent(event)
+
+      expect(values).toEqual([1])
+
+      unsub()
+    })
   })
 
   it('allows custom serialize/deserialize functions', () => {