Svelte Store Storage plugin

Install

npm i -D svelte-syncable

yarn add -D svelte-syncable

How to use

Setting a prefix is optional, the default one is svelteStore

Create your syncable store value

// store.js
import { syncable, setPrefix } from 'svelte-syncable';

// All the syncable value will be stored as "foorbar-{name}"
setPrefix('foobar');

export const answer = syncable('answer', 42);
export const todos = syncable('todos', [
    { id: 1, text: 'Find the answer of life', done: false }
]);

Use your store value as every other svelte store observables

// Component.svelte
<script>
    import { answer, todos } from './store.js';
</script>

<ul>
    {#each $todos as todo, todo.id}
        <li>{todo.text}</li>
    {/each}
</ul>

The count is {$answer}

API

setPrefix(prefix: string): void

Set the localStorage prefix to {name} The function has to be called on the top of your store.js file.

syncable(name: string, value: any, hydrate: boolean = true): SvelteObservable

Create a svelte observable store value and synchronize it with the localStorage. The value will by hydrated from the localStorage by default, set hydrate to false to avoid this behavior. The hydrate parameter is optional and set to true by default.

import { syncable } from 'svelte-syncable';
import { writable } from 'svelte/store';

export const count = syncable('count', 0, false);

Handle Safari SecurityError accessing localStorage

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

Safari throws an exception, and I've squashed it to at least this behavior — returning a regular writable might be preferable, but this seemed like a good start.

Here is the diff that solved my problem:

diff --git a/node_modules/svelte-syncable/index.js b/node_modules/svelte-syncable/index.js
index 0b73f0d..df52347 100644
--- a/node_modules/svelte-syncable/index.js
+++ b/node_modules/svelte-syncable/index.js
@@ -3,17 +3,24 @@ import { writable } from 'svelte/store';
 let prefix = 'svelteStore';
 
 const get = (key) => {
-  if (typeof window === undefined || !localStorage) return undefined;
-  const value = localStorage.getItem(key);
-  return value === undefined
-    ? ""
-    : JSON.parse(value);
+  try {
+    if (typeof window === undefined || !localStorage) return undefined;
+    const value = localStorage.getItem(key);
+    return value === undefined ? "" : JSON.parse(value);
+  } catch (e) {
+    if (e.name == 'SecurityError') return undefined;
+    throw e;
+  }
 };
 
 const set = (key, value) => {
-  if (typeof window === undefined || !localStorage) return;
+  try {
+    if (typeof window === undefined || !localStorage) return;
 
-  localStorage.setItem(key, JSON.stringify(value));
+    localStorage.setItem(key, JSON.stringify(value));
+  } catch (e) {
+    if (e.name != 'SecurityError') throw e;
+  }
 };
 
 const syncValue = (key, observable) => {
@@ -38,3 +45,4 @@ export const syncable = (name, value, hydrate = true) => {
 
   return syncValue(key, writable(lastValue));
 };
+

This issue body was partially generated by patch-package.

chainlist / svelte-syncable Goto Github PK

svelte-syncable's Introduction

Svelte Store Storage plugin

Install

How to use

API

setPrefix(prefix: string): void

syncable(name: string, value: any, hydrate: boolean = true): SvelteObservable

svelte-syncable's People

Contributors

Stargazers

Watchers

Forkers

svelte-syncable's Issues

Recommend Projects

Recommend Topics

Recommend Org