react-storage-kit
v0.0.2
Published
Local storage encryption Library for React Js
Downloads
1
Readme
Features
- Generates a different secret for each browser, used to symmetrically encrypt the data before saving it to LocalStorage and reading it out.
- The value stored in local storage is automatically generated and saved for each browser, cannot be transferred to another computer for use.
- Provides hook functions to interact with data.
- The stored value can only be modified through the provided functions, avoiding inspection via the browser's Develop Tools.
- Direct synchronization with local storage every time the value changes
Coming soon
- When setting a value to StorageKit can include an expiration time (like cookies).
- If the value stored in StorageKit expires, null will be returned
Installation
npm install --save react-storage-kit
or
yarn add react-storage-kit
Usage with Hook
import React, { useState } from 'react'
import { useStorageKit } from 'react-storage-kit'
// inside your function component
const storage = useStorageKit()
getAll()
Return all value in Storage Kit
import React, { useState } from 'react'
import { useStorageKit } from 'react-storage-kit'
const MyComponent = () => {
const storage = useStorageKit()
const data = storage.getAll()
return (
<div>
<span>{data.fullName}</span>
</div>
)
}
export default MyComponent;
getMultiple(string[]
)
Return multiple value in Storage Kit
import React, { useState } from 'react'
import { useStorageKit } from 'react-storage-kit'
const MyComponent = () => {
const storage = useStorageKit()
const data = storage.getMultiple(["fullName", "email", "age"])
console.log(data.fullName) // John Doe
console.log(data.phoneNumber) // undefined
return (
<div>
<span>{data.fullName}</span>
<span>{data.email}</span>
<span>{data.age}</span>
</div>
)
}
export default MyComponent;
setItem(key: string
,value: object | string | number
)
Set key value StorageKit
import React, { useState } from 'react'
import { useStorageKit } from 'react-storage-kit'
const MyComponent = () => {
const storage = useStorageKit()
const handleClearAll = () => {
storage.setItem("fullName", "John Doe")
}
return (
<div>
<button onClick={handleClearAll}>Set item</button>
</div>
)
}
export default MyComponent;
removeItem(key: string
)
Delete a value in StorageKit
import React, { useState } from 'react'
import { useStorageKit } from 'react-storage-kit'
const MyComponent = () => {
const storage = useStorageKit()
const handleSetItem = () => {
storage.removeItem("fullName")
}
return (
<div>
<button onClick={handleDeleteItem}>Delete item</button>
</div>
)
}
export default MyComponent;
clear()
delete all values stored in StorageKit
import React, { useState } from 'react'
import { useStorageKit } from 'react-storage-kit'
const MyComponent = () => {
const storage = useStorageKit()
const handleClearAll = () => {
storage.clear()
}
return (
<div>
<button onClick={handleClearAll}>Clear All</button>
</div>
)
}
export default MyComponent;
License
MIT © l1ttps