ls-proxy

// No validation
import { storeObject } from 'ls-proxy'

// Stored serialized in localStorage under the key `myObject`
// Note that types other than string can be used
const myPerson = storeObject('myObject', {
  name: 'John',
  age: 21,
  interests: ['programming'],
})

myPerson.name = 'Joe' // Updates localStorage
console.log(myPerson.name) // Checks localStorage if checkGets is true

// Validating that the expected keys exist and are the correct type
import { storeObject, validateKeys } from 'ls-proxy'

const myObj = storeObject(
  'myObj',
  {
    someString: 'string',
    someNumber: 42,
  },
  {
    validate(value) {
      if (!validateKeys(value, ['someString', 'someNumber'])) return false
      if (typeof value.someString !== 'string') return false
      if (typeof value.someNumber !== 'number') return false
      return true
    },
  },
)

// Automatically change a key based on another
import { storeObject } from 'ls-proxy'

interface Person {
  name: string
  age: number
  minor: boolean
}

const myPerson = storeObject<Person>(
  'myPerson',
  {
    name: 'Ellie',
    age: 17,
    minor: true,
  },
  {
    // If the person's age is 18 or greater, set minor to false.
    // Otherwise, set it to true.
    // This will affect values as they're being stored in localStorage
    // and retrieved from it
    modify(value) {
      if (value.age >= 18) value.minor = false
      else value.minor = true
      return value
    },
  },
)

myPerson.age = 18
console.log(myPerson.minor) // false
myPerson.age = 16
console.log(myPerson.minor) // true

// No validation
import { storeSeparate } from 'ls-proxy'

const myObj = storeSeparate({
  foo: 'bar',
  abc: 123,
  numbers: [1, 2, 3],
})

myObj.foo = 'baz' // Updates localStorage
console.log(myObj.foo) // Checks localStorage if checkGets is true
console.log(myObj.abc === localStorage.abc) // true

// Validating that the key being set/get is correct
import { storeSeparate } from 'ls-proxy'

const myObj = storeSeparate(
  {
    foo: 'bar',
    abc: 123,
  },
  {
    validate(value, action, key) {
      if (key !== 'foo' && key !== 'abc') return false
      return true
    },
  },
)

// Using IDs to avoid conflicting names
import { storeSeparate } from 'ls-proxy'

const obj1 = storeSeparate({ foo: 'bar' }, { id: 'obj1' })
const obj2 = storeSeparate({ foo: 123 }, { id: 'obj2' })

console.log(obj1.foo) // bar
console.log(obj2.foo) // 123
console.log(localStorage['obj1.foo']) // "bar"
console.log(localStorage['obj2.foo']) // 123

// Automatically change a key while being set/get
import { storeSeparate } from 'ls-proxy'

const myObj = storeSeparate(
  { base64Value: 'foo' },
  {
    // Decode base64 on get
    get(key) {
      return window.btoa(localStorage.getItem(key)!)
    },
    // Encode base64 on set
    set(key, value) {
      localStorage.setItem(key, window.atob(value))
    },
  },
)

myObj.base64Value = 'bar' // Encoded in localStorage
console.log(myObj.base64Value) // Logs 'bar', decoded from localStorage