pinguinjkeke / vue-local-storage Goto Github PK

This is a good package for localstorege, But I think can add auto expire to this package? like cookie, redis, memcache...., we can set when the key-value auto expire.

If we use this plugin w/o build system by including it in html script tag it cause an error to browser's console: Uncaught ReferenceError: process is not defined.

This problem appears after adding new SSR feature to plugin, at this line:

"Browsers that support localStorage will have a property on the window object named localStorage. However, for various reasons, just asserting that property exists may throw exceptions. If it does exist, that is still no guarantee that localStorage is actually available, as various browsers offer settings that disable localStorage. So a browser may support localStorage, but not make it available to the scripts on the page. One example of that is Safari, which in Private Browsing mode gives us an empty localStorage object with a quota of zero, effectively making it unusable. Our feature detect should take these scenarios into account."

See:

https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API#Testing_for_support_vs_availability

And:
https://gist.github.com/paulirish/5558557

I assumed that to use an object as a default value I needed to return it from a function, as in main vue props, but this appears not to be the case - instead it appears you should provide the default object directly.

On reflection this does make sense on a couple of levels, but it would be good to mention it in the docs!

Thanks

Hello, I am storing my states in localStorage and problem is that this plugin store all objects in one big object and so on. Is there any way how to remove one specific obj.
I see in the doc. how to remove specific string but this is something that parsing to JSON.slice and back could solve. Or do you have something else on mind?

in usage:

// Use localStorage from Vue object
Vue.$localStorage.set('someNumber', 123)

but it report Uncaught TypeError: Cannot read property 'set' of undefined when i use in my project.

I checked the source code:

Vue.localStorage = VueLocalStorage
Vue.prototype.$localStorage = VueLocalStorage

So the correct way to use it is

Vue.localStorage.set('someNumber', 123)

been a long time since last update, just wondering if this will be reliable for production

SSR support needed:

ReferenceError: window is not defined

For example in vue-router:

router.beforeEach((to, from, next) => {
  let user = Vue.localStorage.get('user') 
})

If the request comes from in-app routing user is indeed an object. But if we hard refresh the page user is still a string (JSON.stringified).

Update
After digging around I found out that the properties object was empty. So the type of the object user is a string, therefore no JSON object parsing has happened. The vue-router triggers the global beforeEach method before the vue-local-storage component could initialize its properties.

Upon inspection it's not really clear what is causing this. This is the error:

Unexpected token: punc (}) [/node_modules/vue-localstorage/dist/vue-local-storage.js:224,24]

Using UglifyJS via uglifyjs-webpack-plugin version 2.1.1

Hi.
When I update 0.3.0 -> 0.4.1 and running

cross-env NODE_ENV=development webpack --watch --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

defined inside my admin.js as

import VueLocalStorage from 'vue-localstorage';

Vue.use(VueCookie);
Vue.use(Clipboard);
Vue.use(PortalVue);
Vue.use(VueLocalStorage);

everything compiled just fine but in the browser Im getting: Uncaught TypeError: __webpack_require__.i is not a function.

Reverting back to 0.3.0 fixes everything.

My webpack config is rather large, but I can share some parts if you need details. Just let me know that you'll need.

Currently doesn't work.
Could we make it portable

• Fix some const/let statements in es2015 version
• Add default value to get method
• Add unit tests
• Add e2e tests
• Split to src and dist folders
• Add building with rollup
• Add examples
• Add TypeScript bindings
• Add eslint rules
• Add ability to change $localStorage binding to any other name
• Documentation (gitbook maybe)
• Changelog
• Integrate with CI
• Switch to JSON.stringify and JSON.parse instead of manual fields definition
• SSR support
• Automatically create getters and setters (Thanks to @dasdeck)
• Namespaces (Thanks to @nikolay-borzov)

Can we update vue dependency so that it works with latest release please?

Module build failed: Error: 

Vue packages version mismatch:

- [email protected]
- [email protected]

Are there plans to migrate this to support Vue 3?

I have my type as Array and can't seem to figure out why this isn't working properly. VueLocalStorage._properties is somehow still {} and then defaults to type of String.

Hi! i'm trying to use your repo with .vue files, And the set function not work for me.

i try this stuff on my Hello.vue file:
HTML:
<button v-on:click="change">change</button><br/><br/>

script:

1. change () { let bool = this.$localStorage.get('bolian') console.log('$localStorage ', bool) if (bool) { bool = this.$localStorage.set('bolian', false) } else { bool = this.$localStorage.set('bolian', true) } console.log('$localStorage ', bool)

2. ` let bool = this.$localStorage.get('bolian')
   console.log('$localStorage ', bool)

   bool = this.$localStorage.set('bolian', !this.$localStorage.get('bolian'))

   console.log('$localStorage ', bool)
   }`

3. ` change () {
   let bool = this.$localStorage.get('bolian')
   console.log('$localStorage ', bool)

   bool = this.$localStorage.set('bolian', !bool)

   console.log('$localStorage ', bool)
   }`

I hope you can help me understand my mistake

It seems createComputed is not anywhere in the source code, only to be found in the readme

As mentioned above, when I use it in a SSR project, it throws some error.
Error message:

So could you please give me some examples about how to use it in SSR?
My code is just like this:
app.js

import VueLocalStorage from 'vue-localstorage'
Vue.use(VueLocalStorage, {
  name: 'ls'
})

And my login.vue:

Thanks in advance!

Useful for dynamic properties.

this.$localStorage.set(`widget.${id}.expanded`, true)

this.$localStorage.get(`widget.${id}.expanded`, false, Boolean)

We can also assume type by checking defaultValue type:

// Assume value is Boolean
this.$localStorage.get(`widget.${id}.expanded`, false)

Hi. Thanks for the plugin. I am going to use it with nuxt (only on client side, of course).
Just to let you know that the README is a bit incomplete. First of all, lacks of examples. Secondly, you forgot to mention that in order to bind to work, you must specify into the options:

  localStorage: {
    someObject: {
      type: Object,
      default: {
        hello: 'world'
      },
      bind: true
    }
}

From index.js

 if ((bind || config.bind) && config.bind !== false) {
              this.$options.computed = this.$options.computed || {}`
}

It would help to shave a few lines for testing if it's null or not and you have to initialize an array or an object so you can add values to it.

Example:

let storedData = this.$localStorage.get('storedData', {});

instead of

let storedData = this.$localStorage.get('storedData');
if (storedData === null) {
    storedData = {}
}

I need to empty the localstorage.
Is there a way to remove all the items at once?
Didn't find it in the documentation
Thanks

I'm pretty new to vue so correct me if I was wrong. I think it's better to provide ability to call get/set/remove outside vue instance, like in vuex actions. Vuex and vue-router can do that. I don't know how to access the instance method in vuex action, where I guess all side-effect should be put in. (like redux-saga)

I just make install a static method of VueLocalStorage class, and export the class, it works. I can make a PR later if this is okay.

vue-localstorage.es2015.js:103Uncaught SyntaxError: Unexpected token export

Hello

On https://www.npmjs.com/package/vue-localstorage

Wrong Readme.

Error in this case:

Vue.use(VueLocalStorage)
// Or you can specify any other name and use it via this.$ls, this.$whatEverYouWant 
Vue.use(VueLocalStorage, {
  name: 'ls'
}

Need correct to:

Vue.use(VueLocalStorage)
// Or you can specify any other name and use it via this.$ls, this.$whatEverYouWant 
Vue.use(VueLocalStorage, {
  name: 'ls'
})

why number is Int? not Float?
I suggest add Int type and Float type

I want to listen data storage result, when it is true to do something, other not.

Version "vue-localstorage": "^0.6.2",

We want to specify a custom name, e.g. ls, so we can use this.$ls. in our components.
However, specifying name causes two bugs in my observation.

On load, it does not auto-save default values into localStorage

Vue.use(VueLocalStorage, {
  name: 'ls',
});

It only seems to happen if name is not localStorage.
If we pass name: 'localStorage', it works (default values created and saved automatically on localStorage on load).

Vue.use(VueLocalStorage, {
  name: 'localStorage',
});

It prevents types automatic type parsing

Doing name: 'ls' also seems to cause bug where

Vue.localStorage.set('someObject', { x: 1 })

will be saved as [object Object], even if it was specified as object in the plugin definition.

Heyy, guy,
Quick question after a quick test: this lib support SSR mode now ?
I got still error kind of TypeError: Cannot read property 'set' of undefined, any tips ?

Thx for help.

Because sometimes sessionStorage is needed, so this is my suggest.
just like this
Vue.use(VueLocalStorage, {
localStorageName: 'ls',
sessionStorageName: 'ss',
bind: true
})

The plugin relies on an always accessible and writable localStorage which (at least in our case) leads to alot of errors if its not available.

It would be easy to prevent those errors if a small check would be implemented first or something similar to the solution described here: https://stackoverflow.com/questions/21159301/quotaexceedederror-dom-exception-22-an-attempt-was-made-to-add-something-to-st

let isSupported;

try {
  localStorage.setItem('vue-localstorage', '');
  localStorage.removeItem('vue-localstorage');

  isSupported = true;
} catch (err) {
  isSupported = false;
}

First off - great project, really love the idea behind the implementation.

It would be great if we could only use your VueLocalStorage class in projects. The way the mixin is implemented is a bit off for our needs, but the class it's using is spot on.

Any idea how we could do this?

I have defined a storage key as an Array on instance, but when I get it and tries to push an object in it doesn't works.

new Vue({
  el: '#app',
  localStorage: {
    favs: {
      type: Array,
      default: []
    }
  }

Here is how I wanted to push some new object in it.

addFav () {
      this.loading = true

      axios.get('http://localhost:8989/add-fav' ).then((res) => {
        this.loading = false

        // this doesn't work
        this.$localStorage.get('favs').push(this.fav)

        // this works
        // let favs = this.$localStorage.get('favs')
        // channels.push(this.fav)
        // this.$localStorage.set('favs', favs)

        // clear the fields
        this.fav = {}
      }, (err) => {
        this.loading = false
        console.log(err)
      })
}

Hi! Thanks for your plugin.

If I directly include this plugin into html script tag it become available in browser window as window.VeeValidate, not as window.VueLocalStorage, but all works fine.

See there:

I want to use this plugin https://github.com/baianat/vee-validate alongside, but I'm having trouble with name collision.

Thanks.

The library does not include the clear() method so we can clear all data. (window.localStorage.clear())

Will help to avoid key collisions.

Vue.use(VueLocalStorage, {
  namespace: 'myProject.'
})

The set method in vue-localstorage.es2015.js is missing it's params and failing when called:

static set () {

should be:

static set (lskey, value) {

Thanks!

Vue.use(VueLocalStorage, {
  name: 'ls',
  bind: true
})

What does bind do? Do I need it? Thanks.

When storing object directly, it only store as [object Object].

Should we json encode before store?