• Stars
    star
    121
  • Rank 293,924 (Top 6 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created over 7 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Vue and Vuex plugin to persistence data with localStorage/sessionStorage

vuejs-storage

Vue.js and Vuex plugin to persistence data with localStorage/sessionStorage

npm npm GitHub Workflow Status codecov

Purpose

This plugin provide a simple binding with localStorage and sessionStorage (or something similar) to Vue and Vuex.

It has no dependencies, so it is really small.

  • .js size: 5.75KB (1.7KB gzipped)
  • .min.js size: 2.21KB (1.1KB gzipped)

Usage

//in webpack environment:
import vuejsStorage from 'vuejs-storage'
//in browser script tag:
const vuejsStorage = window.vuejsStorage

Vue.use(vuejsStorage)

//vue example
new Vue({
  //...
  data: {
    count: 0,
    text: ''
  },
  storage: {
    keys: ['count'],
    //keep data.count in localStorage
    namespace: 'my-namespace'
  }
})

//vuex example
const store = new Vuex.Store({
  //state...
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  plugins: [
    vuejsStorage({
      keys: ['count'],
      //keep state.count in localStorage
      namespace: 'my-namespace',
      driver: vuejsStorage.drivers.sessionStorage
      //if you want to use sessionStorage instead of localStorage
    })
  ]
})

Nested key

data: {
  a: {
    b: 1,
    c: 2
  }
},
storage: {
  namespace: 'test',
  keys: ['a.b']
  //only keep a.b in localStorage
}

Vuex modules

state: {
  a: 1
},
modules: {
  moduleA: {
    state: {
      a: 2
    }
  }
},
plugins: [
  vuejsStorage({
    namespace: 'test',
    keys: ['moduleA','a']
    // keep both root's state.a & moduleA's state
  })
]

Multiple storage

data: {
  a: 1,
  b: 2
},
storage: [
  {
    namespace: 'test',
    keys: ['a']
  },
  {
    namespace: 'test',
    keys: ['b'],
    driver: vuejsStorage.drivers.sessionStorage
  }
]

API

vuejsStorage

Vue plugin

Vue.use(vuejsStorage)

vuejsStorage(option)

Create a Vuex plugin

const vuexplugin = vuejsStorage(/* option object*/)

option

Option object, can be used when create Vuex plugin or in Vue option storage field

{
  keys: [], //array of string
  /*
  this option is different when use in vue and vuex
  when used in Vue constructor option, keys means which data should be keep in localStorage
  when used in Vuex plugin, keys mean which state should be keep in localStorage
  */
  driver: vuejsStorage.drivers.sessionStorage, //any object has 'set','get','has' api, default: vuejsStorage.drivers.localStorage
  namespace: 'ns', //a string, REQUIRED
  merge: _assign //a function to merge object like Object.assign, default: internal implementation(src/assign.ts)
}

Examples

More Repositories

1

GDIndex

A Google Drive Index built with Vue Running on CloudFlare Workers
HTML
1,849
star
2

cf-warp

JavaScript
449
star
3

aria2c-ariang

HTML
310
star
4

ytdl

Get youtube video download url
JavaScript
263
star
5

wasm-jseval

A safe eval library based on WebAssembly and Duktape/QuickJS.
C
230
star
6

My-CTF-Challenges

Challenges I created for CTF competitions.
Python
182
star
7

browser-extensions

我的一些 userjs & usercss
JavaScript
88
star
8

ebook-converter

簡單的電子書繁簡轉換器
JavaScript
53
star
9

mergemp4

JavaScript
52
star
10

saucenao-search-tgbot

A telegram bot enable you to search SauceNAO in telegram.
TypeScript
34
star
11

lll_cvp

Sage
34
star
12

ghfileupl

JavaScript
29
star
13

gitcf

A service that is similar to RawGit, but this one is running on CloudFlare Workers.
26
star
14

aria2-manager

HTML
26
star
15

apps-script-db

A key-value database by Google Apps Script
JavaScript
24
star
16

LKT-Manager

Kotlin
17
star
17

anime1-downloader

用來下載 Anime1.me 網站上的動漫
JavaScript
17
star
18

ani-gamer-toolbox

JavaScript
16
star
19

pximg-referer

JavaScript
12
star
20

heroku-proxy-local

11
star
21

gmxhr-fetch

fetch-like polyfill for userscript managers
JavaScript
10
star
22

nctfu-lattice

Sage
9
star
23

xfetch-js

A extremely simple fetch extension inspired by sindresorhus/ky.
JavaScript
9
star
24

imaginaryCTF-solution

Python
8
star
25

vue-runkit

vue wrapper of runkit embed
HTML
7
star
26

cf-webhook

HTML
7
star
27

nycu-secure-programming-2021

2021 交大程式安全
Python
6
star
28

dotfiles

Shell
6
star
29

brainfuck-in-x86-assembly

Assembly
6
star
30

require-unpkg

require from unpkg.com in browser
JavaScript
5
star
31

osuplayer

JavaScript
5
star
32

WynnStats

WynnStats is a serverless client which can view wynncraft statistics.
Vue
5
star
33

Netease-Music-Proxy

C#
4
star
34

2048-battle

Python
3
star
35

pixiv-client

Pixiv api client for node.js written in typescript.
TypeScript
3
star
36

craft2d

Java
3
star
37

maple3142.github.io

HTML
2
star
38

node-rclone

JavaScript
2
star
39

maple-bot

A linebot
JavaScript
2
star
40

TodoList

JavaScript
2
star
41

php-url-shortener

PHP
2
star
42

ncu-mlisp

JavaScript
2
star
43

js-highlight-practice

JavaScript
1
star
44

mapleutil

JavaScript
1
star
45

nodegist

A simple module allow you to create gists
JavaScript
1
star
46

NCU-UML-Editor

Java
1
star
47

osuplayer-old

A music player for osu!
JavaScript
1
star
48

node-electron-clipboard

JavaScript
1
star
49

Practice

C++
1
star
50

comments-of-blog

JavaScript
1
star
51

xml-translate

a simple tool to translate xml/html with google translate
JavaScript
1
star
52

megumin-pack

A really small javascript bundler for practice.
JavaScript
1
star
53

NCU-Linux-Project

C
1
star
54

build-ffmpeg-wasm

1
star
55

vue-cli-locale-zh-tw

JavaScript
1
star
56

OMG

TypeScript
1
star
57

httpsrv

A simple http file server
JavaScript
1
star
58

request

TypeScript
1
star
59

rr-bot

TypeScript
1
star
60

vuejs-contextmenu

vue.js contextmenu wrapper
JavaScript
1
star
61

wenku8_spider

Python
1
star
62

baha_notify

JavaScript
1
star
63

static-to-worker

HTML
1
star