Browser storage interface for IndexedDB, WebSQL, LocalStorage, and in memory data with Schema and data validator.

Overview

Client Web Storage

Browser storage interface for IndexedDB, WebSQL, LocalStorage, and in memory data with basic Schema and data validation.

npm

Installation

In Node Projects:

npm install client-web-storage
import {Schema, ClientStore} from "client-web-storage";

In the Browser

<!-- use the latest version -->
<script src="https://unpkg.com/client-web-storage/dist/client-web-storage.min.js"></script>

<!-- use a specific version -->
<script src="https://unpkg.com/[email protected]/dist/client-web-storage.min.js"></script>
const {Schema, ClientStore} = window;

Get Started

The library is very small but super powerful. There are only few things to interact with:

// Define schema TS type
import {ClientStore, Schema} from "client-web-storage";

interface ToDo extends Schema.DefaultValue {
    name: string;
    description: string;
    complete: boolean;
}

// create and define schema
const todoShema = new Schema<ToDo>("todo");

todoShema.defineField("name", String, {required: true});
todoShema.defineField("description", String, "No Description");
todoShema.defineField("complete", Boolean);

// create and use the store
const todoStore = new ClientStore("todos", todoShema);

todoStore.createItem({
    name: "Go to Gym" // only name is required
});

/*  Creates item in the store
{
  id: "123e4567-e89b-12d3-a456-426614174000", // generated id
  name: "Go to Gym",
  description: "No Description",
  complete: false,
  createdDate: "January, 4th 2022",
  lastUpdatedDate: "January, 4th 2022",
}
*/
Comments
  • Release 1.5.0

    Release 1.5.0

    • introduces new custom types ArrayOf and OneOf
    • fixed loaded not being broadcasted when the list is empty
    • expose CWS in the client instead of placing classes straight into the window
    • allow data to be overridden from the beforeChange handler
    • fixed bug which removes schema keys which are like the default schema values when excluding them
    enhancement new release 
    opened by ECorreia45 0
  • Schema with includeDefaultKeys set to false will exclude those keys

    Schema with includeDefaultKeys set to false will exclude those keys

    const someSchema = new Schema('name', {
        id: new SchemaValue(String),
        createdData: new SchemaValue(Date)
    }, false);
    
    someSchema.toValue(); // will no include id and createdData
    
    bug 
    opened by ECorreia45 0
  • Allow data to be placed in the store via

    Allow data to be placed in the store via "beforeChange"

    todoStore.beforeChange(async (eventType, data) => {
        switch (eventType) {
            case ClientStore.EventType.CREATED:
                return (await todoService.createTodo(data)).map(/some mapping/); // use this data from the server
            .
            .
            .
            default:
        };
        
        return true; // use the data in the action
    });
    
    

    Motivation

    You can use data, for example,:

    { name: "My Todo" }
    

    to create the item and the store will fill the defaults which is great but the backend will include more proper data, for example the "id" and creation time info

    in that case you would want the data from the backend to be cached in the front instead

    { name: "My Todo" , id: "23i8had9emz209q8q", createdDate: "2022-01-04"}
    
    enhancement 
    opened by ECorreia45 0
  • #6 additional custom types

    #6 additional custom types

    • introduces ArrayOf and OneOf types and makes it easier to add new custom types
    • fixes some doc typos
    • makes loaded events always propagate even with an empty data list
    • exposes CWS for client
    enhancement 
    opened by ECorreia45 0
  • Simplify Schema and Store creation

    Simplify Schema and Store creation

    Schema

    {
      $name: “no-name”, // required name field with default value "no-name"
      description: “”, // string prop
      selected: false,  // boolean prop
      children: [], // array of anything
      sample: [0,1,2], // array of number
      subList: ArrayOf(Number), // array of number
      total: 20, // number
      count: 233n, // big int
      data: Blob,
      buffer: Buffer,
      T: Int32Array
    }
    

    Store

    store(name, schema); // memory store
    localStore()
    dbStore()
    sqlStore()
    
    enhancement 
    opened by ECorreia45 0
Releases(1.5.0)
  • 1.5.0(Nov 19, 2022)

    New

    • custom types ArrayOf and OneOf for schemas
    const exampleSchema = new Schema<Prop>('example', {
    	id: new SchemaValue(OneOf(String, Number)), // define multiple type options for value
    	options: new SchemaValue(ArrayOf(String)), // specify what type of array it is
    }, false)
    
    • Allow to override the data via beforeChange return for CREATED, UPDATED, and LOADED events
    
    const unsub = todoStore.beforeChange(async (eventType, data) => {
        switch (eventType) {
            case ClientStore.EventType.CREATED:
                return await todoService.createTodo(data); // <- return the data 
            case ClientStore.EventType.UPDATED:
                return await todoService.updateTodo(data.id, data); // <- return the data 
    	case ClientStore.EventType.LOADED:
                return await todoService.getAllByIds(data.map(m => m.id)); // <- return the data 
            default:
        };
        
        return true; // required to flag the store that the action should continue
    });
    
    

    Fixes

    • LOADED was not broadcasted when the list provided was empty.
    • Schema was removing explicitly defined values which looked like default values when includeDefaultKeys was set to false
    • All classes where being set directly in window. Now they are available under CWS object on the client

    What's Changed

    • Develop by @ECorreia45 in https://github.com/beforesemicolon/client-web-storage/pull/5
    • #6 additional custom types by @ECorreia45 in https://github.com/beforesemicolon/client-web-storage/pull/8
    • #9 allow override via beforeChange by @ECorreia45 in https://github.com/beforesemicolon/client-web-storage/pull/10
    • #11 by @ECorreia45 in https://github.com/beforesemicolon/client-web-storage/pull/12

    Full Changelog: https://github.com/beforesemicolon/client-web-storage/compare/1.4.5...1.5.0

    Source code(tar.gz)
    Source code(zip)
  • 1.4.5(Jul 2, 2022)

    • Convert loadItems into its own action so it does not keep triggering create and update events for every item on the list which can cause infinite loops between the api listener and the data creation;

    Improvements:

    • Calling loadItems no longer leave the store size at its previous state. The size of the store reflects the new items loaded;
    • beforeChange is now typed
    • Loaded items will now validate all items first before putting them into the store;

    What's Changed

    • Develop by @ECorreia45 in https://github.com/beforesemicolon/client-web-storage/pull/1
    • Develop by @ECorreia45 in https://github.com/beforesemicolon/client-web-storage/pull/2
    • Develop by @ECorreia45 in https://github.com/beforesemicolon/client-web-storage/pull/3
    • License by @ECorreia45 in https://github.com/beforesemicolon/client-web-storage/pull/4

    New Contributors

    • @ECorreia45 made their first contribution in https://github.com/beforesemicolon/client-web-storage/pull/1

    Full Changelog: https://github.com/beforesemicolon/client-web-storage/commits/1.4.5

    Source code(tar.gz)
    Source code(zip)
  • 1.3.0(Jun 17, 2022)

    Browser storage interface for IndexedDB, WebSQL, LocalStorage, and in-memory- data with basic Schema and data validation.

    // Define schema TS type
    import {ClientStore, Schema} from "client-web-storage";
    
    interface ToDo extends Schema.DefaultValue {
        name: string;
        description: string;
        complete: boolean;
    }
    
    // create and define schema
    const todoShema = new Schema<ToDo>("todo");
    
    todoShema.defineField("name", String, {required: true});
    todoShema.defineField("description", String);
    todoShema.defineField("complete", Boolean);
    
    // create and use the store
    const todoStore = new ClientStore("todos", todoShema);
    
    todoStore.createItem({
        name: "Go to Gym" // only name is required
    });
    
    /*  Creates item in the store
    {
      id: 3284732894792342, // generated id
      name: "Go to Gym",
      description: "",
      complete: false,
      createdDate: "January, 4th 2022",
      lastUpdatedDate: "January, 4th 2022",
    }
    */
    

    What's Changed

    • Develop by @ECorreia45 in https://github.com/beforesemicolon/client-web-storage/pull/1

    Full Changelog: https://github.com/beforesemicolon/client-web-storage/commits/1.3.0

    Source code(tar.gz)
    Source code(zip)
Owner
Before Semicolon
Blog & Youtube Channel | Web, UI, Software Development & Developer's Career Tips
Before Semicolon
💾 Offline storage, improved. Wraps IndexedDB, WebSQL, or localStorage using a simple but powerful API.

localForage localForage is a fast and simple storage library for JavaScript. localForage improves the offline experience of your web app by using asyn

localForage 21.5k Jan 1, 2023
Expirable data storage based on localStorage and sessionStorage.

Expirable storage About The Project Expirable data storage based on localStorage and sessionStorage. Getting Started To get a local copy up and runnin

Wayfair Tech – Incubator 5 Oct 31, 2022
:lock: Secure localStorage data with high level of encryption and data compression

secure-ls Secure localStorage data with high level of encryption and data compression. LIVE DEMO Features Secure data with various types of encryption

Varun Malhotra 602 Nov 30, 2022
A enhanced web storage with env support, expire time control, change callback and LRU storage clear strategy.

enhanced-web-storage A enhanced web storage with env support, expire time control, change callback and LRU storage clear strategy. How to Start import

Ziwen Mei 15 Sep 10, 2021
local storage wrapper for both react-native and browser. Support size controlling, auto expiring, remote data auto syncing and getting batch data in one query.

react-native-storage This is a local storage wrapper for both react native apps (using AsyncStorage) and web apps (using localStorage). ES6 syntax, pr

Sunny Luo 2.9k Dec 16, 2022
db.js is a wrapper for IndexedDB to make it easier to work against

db.js db.js is a wrapper for IndexedDB to make it easier to work against, making it look more like a queryable API. Usage Add a reference to db.js in

Aaron Powell 790 Nov 28, 2022
A script and resource loader for caching & loading files with localStorage

Basket.js is a script and resource loader for caching and loading scripts using localStorage ##Introduction for the Non-Developer Modern web applicati

Addy Osmani 3.4k Dec 30, 2022
localStorage and sessionStorage done right for AngularJS.

ngStorage An AngularJS module that makes Web Storage working in the Angular Way. Contains two services: $localStorage and $sessionStorage. Differences

G. Kay Lee 2.3k Nov 26, 2022
Vue.js localStorage plugin with types support

VueLocalStorage LocalStorage plugin inspired by Vue typed props which take a care of typecasting for Vue.js 1 and 2 with SSR support. Install npm inst

Alexander Avakov 669 Nov 29, 2022
Simple window.localStorage, with type safety

mini-local-storage simple window.localStorage, with type safety example // localStorage.ts import { createLocalStorage } from "mini-local-storage";

Kipras Melnikovas 4 Jan 8, 2023
Cross-browser storage for all use cases, used across the web.

Store.js Cross-browser storage for all use cases, used across the web. Store.js has been around since 2010 (first commit, v1 release). It is used in p

Marcus Westin 13.9k Dec 29, 2022
Store your data in the world's fastest and most secure storage, powered by the blockchain technology⚡️

Store your data in the world's fastest and most secure storage, powered by the blockchain technology.

BlockDB 3 Mar 5, 2022
A lightweight vanilla ES6 cookies and local storage JavaScript library

?? CrumbsJS ?? A lightweight, intuitive, vanilla ES6 fueled JS cookie and local storage library. Quick Start Adding a single cookie or a local storage

null 233 Dec 13, 2022
A javascript based module to access and perform operations on Linode object storage via code.

Linode Object Storage JS Module A javascript based module to access and perform operations on Linode object storage via code. Code Guardian Installing

Core.ai 3 Jan 11, 2022
Cross domain local storage, with permissions

Cross domain local storage, with permissions. Enables multiple browser windows/tabs, across a variety of domains, to share a single localStorage. Feat

Zendesk 2.2k Jan 6, 2023
JS / CSS / files loader + key/value storage

bag.js - JS / CSS loader + KV storage bag.js is loader for .js / .css and other files, that uses IndexedDB/ WebSQL / localStorage for caching. Conside

Nodeca 86 Nov 28, 2022
:sunglasses: Everything you need to know about Client-side Storage.

awesome-web-storage Everything you need to know about Client-side Storage. Table of Contents Introduction Browser Support Cookies Pros Cons API Useful

Varun Malhotra 420 Dec 12, 2022
An AngularJS module that gives you access to the browsers local storage with cookie fallback

angular-local-storage An Angular module that gives you access to the browsers local storage Table of contents: Get Started Video Tutorial Development

Gregory Pike 2.9k Dec 25, 2022
⁂ The simple file storage service for IPFS & Filecoin

⁂ web3.storage The simple file storage service for IPFS & Filecoin. Getting started This project uses node v16 and npm v7. It's a monorepo that use np

Web3 Storage 423 Dec 25, 2022