# persist-pro

> PersistPro: Uma biblioteca avançada para gerenciamento otimizado de localStorage. Facilita a persistência de dados no navegador, oferecendo uma interface simples e robusta para armazenamento e recuperação de dados, incluindo suporte a objetos e arrays. Id

Latest version **0.1.36** (published 2023-11-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install persist-pro
pnpm add persist-pro
yarn add persist-pro
bun add persist-pro
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.36 |
| Published | 2023-11-26 |
| First published | 2023-11-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 120.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Vitor NOgueira |
| Maintainers | vitor-nogueira-dev |
| Keywords | localStorage, persistence, persist, persist, data persistence, browser data persistence, data persistence in the browser |

## Links

- npm: https://www.npmjs.com/package/persist-pro
- Repository: https://github.com/vitor-nogueira-dev/persist-pro
- Homepage: https://github.com/vitor-nogueira-dev/persist-pro#readme
- Issues: https://github.com/vitor-nogueira-dev/persist-pro/issues
- npm.io page: https://npm.io/package/persist-pro

## Dependencies (3)

- [react](https://npm.io/package/react.md) ^18.2.0
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0
- [@babel/preset-react](https://npm.io/package/@babel/preset-react.md) ^7.23.3

## Alternatives

- [@opentelemetry/exporter-zipkin](https://npm.io/package/@opentelemetry/exporter-zipkin.md) — 14.8M weekly downloads
- [pusher-js](https://npm.io/package/pusher-js.md) — 2.0M weekly downloads
- [browserify](https://npm.io/package/browserify.md) — 1.7M weekly downloads
- [sqs-consumer](https://npm.io/package/sqs-consumer.md) — 1.7M weekly downloads
- [@sanity/eventsource](https://npm.io/package/@sanity/eventsource.md) — 930.8K weekly downloads

## Recent versions

- 0.1.36 (latest) — 2023-11-26
- 0.1.35 — 2023-11-26
- 0.1.34 — 2023-11-26
- 0.1.33 — 2023-11-26
- 0.1.32 — 2023-11-26
- 0.1.31 — 2023-11-26
- 0.1.30 — 2023-11-26
- 0.1.29 — 2023-11-26
- 0.1.28 — 2023-11-26
- 0.1.27 — 2023-11-26
- 0.1.26 — 2023-11-26
- 0.1.25 — 2023-11-26
- 0.1.24 — 2023-11-26
- 0.1.23 — 2023-11-26
- 0.1.22 — 2023-11-26
- … 19 more at https://npm.io/package/persist-pro/versions

## README

# ⭐️ Persist - Pro 

Persist Pro: Uma biblioteca avançada para gerenciamento otimizado de localStorage. Facilita a persistência de dados no navegador, oferecendo uma interface simples e robusta para armazenamento e recuperação de dados, incluindo suporte a objetos e arrays. Ideal para projetos que necessitam de armazenamento local confiável e eficiente.

---

## 💻 Demo 
🔗[Persist Pro Demo](https://persist-pro-demo.vercel.app/)

---

# ⚙️ Uso com React/Next.js
<details>
<summary>Veja aqui</summary>

---
## 📦 Instalação

- **Usando npm:**

```bash
npm install persist-pro
```

- **Usando yarn:**

```bash
yarn add persist-pro
```
--- 

Para utilizar o `useLocalStorage` no seu projeto, comece importando o hook e, em seguida, desestruture as propriedades retornadas para gerenciar facilmente os dados no `localStorage`.

```typescript
import { useLocalStorage } from 'persist-pro';
```

O hook `useLocalStorage` retorna um array com cinco elementos, que você pode desestruturar da seguinte forma:

```typescript
const [value, setValue, pushToStoredArray, removeValue, removeToArrayById] = useLocalStorage('key', 'initialValue');
```

### Props `useLocalStorage`:
<details>
<summary>Veja aqui</summary>


| Elemento          | Tipo       | Descrição                                                                                                                                                                    |
| ----------------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| value             | `any`      | Valor armazenado no localStorage.                                                                                                                                            |
| setValue          | `function` | Uma função para atualizar o valor armazenado no localStorage. Ao chamar `setValue(newValue)`, o valor no localStorage é atualizado, assim como o estado no componente.       |
| pushToStoredArray | `function` | Uma função para adicionar um item ao array no localStorage (é necessário que o valor salvo seja um `array`)                                                                  |
| removeValue       | `function` | Uma função para remover a chave especificada do hook `useLocalStorage`. Ao chamar `removeValue()`, a chave especificada e seu valor associado são removidos do localStorage. |
| removeToArrayById | `function` | Uma função para remover um item do array no localStorage (é necessário que o valor salvo seja um `array`)                                                                    |

</details>


### Exemplo de Usoa (valor simples):
> No exemplo a seguir, o hook é usado para gerenciar um nome de usuário:
```jsx
function MyComponent() {
  // Initializing the hook with the key 'user' and the initial value 'Visitor'
  const [userName, setUserName, pushToStoredArray, removeUserName, removeToArrayById] = useLocalStorage('userName', 'Visitor');

  // Another way of writing
  // const [useName, setUserName, , removeUserName] = useLocalStorage('userName', 'Visitor');
  // You can use the comma to skip and ignore an element in the array that you do not want to use.

  // Example of how to update the value
  const changeName = () => {
    setUserName('Alice');
  };

  // Example of how to remove the key from localStorage
  const clearName = () => {
    removeUserName();
  };

  return (
    <div>
      <p>User Name: {userName}</p>
      <button onClick={changeName}>Change Name to Alice</button>
      <button onClick={clearName}>Clear User Name</button>
    </div>
  );
}
```
Neste exemplo, MyComponent utiliza o hook useLocalStorage para gerenciar o nome do usuário armazenado no localStorage. As funções changeName e clearName são usadas para atualizar e remover o nome do usuário, respectivamente.

### Exemplo de Uso (array):
> No exemplo a seguir, o hook é usado para gerenciar um array de frutas:
```jsx
function MyComponent() {
  const initialFruits = [{ id: 1, name: 'banana' }, { id: 2, name: 'maçã' }, { id: 3, name: 'laranja' }];
  const newFruits = [{ id: 1, name: 'melancia' }, { id: 2, name: 'goiaba' }];

  // Initializing the hook with the key 'fruits' and the initial value 'initialFruits'
  const [fruits, setFruits, pushToStoredArray, removeFruits, removeToArrayById] = useLocalStorage('fruits', initialFruits);


  // Example of how set new array
  const addFruit = () => {
    setFruits(newFruits);
  };

  // Example of how to update the value
  const addFruit = () => {
    pushToStoredArray({ id: 4, name: 'morango' });
  };

  // Example of how to remove the key from localStorage
  const clearFruits = () => {
    removeFruits();
  };

  // Example of how to remove item from array
  const handleRemoveLocalStorage = (id) => {
    removeToArrayById(id);
  }

  return (
    <div>
      {fruits.map((fruit, index) => (
         <div key={index}>
          <p>{fruit}</p>
          <button onClick={() => handleRemoveLocalStorage(fruit.id)}>Remove</button>
          <button onClick={clearFruits}>Clear fruits</button>
        </div>
      ))}
      <button onClick={addFruit}>Add fruit</button>
    </div>
  );
}
```

Neste exemplo, MyComponent utiliza o hook useLocalStorage para gerenciar um array de frutas armazenado no localStorage. As funções pushToStoredArray e removeToArrayById são usadas para adicionar e remover itens do array, respectivamente. A função setFruits é usada para inserir um novo array de frutas. A função clearFruits é usada para remover o array de frutas do localStorage. E a variável fruits é usada para renderizar o array de frutas na tela.

</details>

--- 

### ✨ Como contribuir
Para contribuir com o projeto, leia o arquivo [CONTRIBUTING.md](/CONTRIBUTING.md)

### ℹ️ Mais infos 
- [Persist Pro](https://www.npmjs.com/package/persist-pro) - pacote `npm`.

### ⁉️ Dúvidas, sugestões e melhorias 
Se você tiver dúvidas, quiser relatar um bug ou solicitar novos recursos, por favor, abra uma [issue](https://github.com/vitor-nogueira-dev/persist-pro-demo/issues) no nosso repositório, ou conecte-se comigo no Linkedin - [Vitor Nogueira](https://www.linkedin.com/in/vitor-nogueira-dev/)


### 🪪 Licença
Persist Pro is [MIT licensed](./LICENSE).

---
_Source: https://npm.io/package/persist-pro · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._