Git Product home page Git Product logo

nuxt-storage's Introduction

๐Ÿ›ข Nuxt-Storage

All Contributors version downloads Travis codecov Dependencies

Utilities for easy read and write browser's storage in Nuxt.js project

Why I need this package?

In Nuxt, it's hard to play with browser's storage like sessionStorage and localStorage. This package will help you handle client side storage with a simple API and with various useful additional features such as expiry.

How to install and use

Install using NPM or Yarn

# NPM
$ npm i nuxt-storage

# Yarn
$ yarn add nuxt-storage

Sample using this package

Set data
import nuxtStorage from 'nuxt-storage';

nuxtStorage.localStorage.setData('key', 'value');
nuxtStorage.sessionStorage.setData('key', 'value');

//Set data with expiry time

// default time is 5 minutes, set it to 15
nuxtStorage.localStorage.setData('key', 'value', 15);

// default time unit is minutes , set it to hours, so type 'h'
nuxtStorage.localStorage.setData('key', 'value', 1, 'h');
Get data by value
nuxtStorage.localStorage.getData('key');
nuxtStorage.sessionStorage.getData('key');
Remove or clear storage (localStorage/sessionStorage)
// Remove single item by **key**
nuxtStorage.localStorage.removeItem('key');
nuxtStorage.sessionStorage.removeItem('key');

// Clear entire storage
nuxtStorage.localStorage.clear());
nuxtStorage.sessionStorage.clear();

API options

Method Name Parameter Default Value Available Options
getData key (type: String) Empty String
setData key (type: String) Empty String
value (type: any) Empty String
expiry (type: Number) 5
expiryUnit (type: String) m s = second, m = minutes, h = hour, d = day
removeItem key (type: String)
clear -

Support me


Copyright ยฉ 2018 by Irfan Maulana

Contributors โœจ

Thanks goes to these wonderful people (emoji key):

notjiam
notjiam

โš ๏ธ ๐Ÿ›
Irfan Maulana
Irfan Maulana

๐Ÿ› ๐Ÿšง โš ๏ธ ๐Ÿ’ป
Jakub Zomerfeld
Jakub Zomerfeld

๐Ÿ“

This project follows the all-contributors specification. Contributions of any kind welcome!

nuxt-storage's People

Contributors

allcontributors[bot] avatar dependabot[bot] avatar devzom avatar greenkeeper[bot] avatar irfan-maulana-tkp avatar jefrydco avatar mazipan avatar notjiam avatar renovate-bot avatar renovate[bot] avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

nuxt-storage's Issues

500 __vite_ssr_import_1__.default.localStorage.getItem is not a function

hi i wrote this coode
import nuxtStorage from "nuxt-storage";

export const state = () => ({
token: nuxtStorage.localStorage.getItem("_auth_token"),

vuex nuxt 3 but show this error
tResponse.js?t=1682618774204:32 Uncaught TypeError: nuxtStorage.localStorage.getItem is not a function

how to fix

Update the Documentation to Include How to Remove a Specific Item from the Local Storage

I recently used the package by referring to the documentation and was able to set and get a local storage item successfully. Unfortunately, when I tried to remove the item, I used the clear method because It was the only way to remove an item from the local storage due to the current documentation. The clear method removed every item from the storage while I was targeting a specific item.

So, I had to go through the closed issues to find out whether somebody else faced the same issue and fortunately found out that the undocumented method removeItem is the one that removes a specific item from the local storage.

Finally, I would suggest that you document the removeItem as well so that It will be easier for other developers to easily use the package when It comes to remove a specific item from the local storage.

Thank you!

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

File: renovate.json
Error type: The renovate configuration file contains some invalid settings
Message: Invalid regExp for packageRules[0].packagePatterns: ^core-js``

About subdomains

And what about subdomains. Everything works fine for me with local storage on the main subdomain. But when I switch to another, I no longer have data in local storage. How can I get around this?

getData() method always returns null

I am trying to implement transactions list storing with:

saveTransactionData(txnData) {
    let txnList = getData('txns')
    console.log(txnList)
    if (!txnList) {
      txnList = []
    }
    console.log(txnList)

    txnList.push(txnData)
    setData('txns', txnList, 30, 'd')
  }

But getData('txns') always returns null even if value exists in the Local Storage. So I can't save a list, I always receive only last transaction in storage.

What is wrong?

Any @types support planned?

Currently, I'm working on a Nuxt3 app and wanted to implement a small feature that will use localStorage...

My app is in typescript, and unfortunately, I wasn't able to load types:
See the error:

Could not find a declaration file for module 'nuxt-storage/local-storage'. '/node_modules/nuxt-storage/local-storage/index.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/nuxt-storage` if it exists or add a new declaration (.d.ts) file containing `declare module 'nuxt-storage/local-storage';`ts(7016)

Even though the project (Nuxt-storage) was coded in typescript, the built files don't come with typescript support ๐Ÿง

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.