react-storage-kit - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

dist/hooks/useStorageKit.d.ts

 declare const useStorageKit: () => {
-    getAll: () => any;
-    getMultiple: ([]: Iterable<any>) => void;
-    getItem: (key: string) => any;
-    setItem: (key: string, value: any) => void;
-    removeItem: () => void;
+    getAll: () => object;
+    getMultiple: (keys: string[]) => {};
+    getItem: (key: string) => object | string | number | null;
+    getKey: () => string;
+    setItem: (key: string, value: object | string | number) => void;
+    removeItem: (key: string) => void;
     clear: () => void;
 };
 export default useStorageKit;

dist/index.js

@@ -116,3 +116,3 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
-var getStorage = function getStorage() {
+function getStorage() {
   try {
@@ -122,5 +122,5 @@ var decrypt = cryptoJs.AES.decrypt(localStorage.getItem(keyStorage), deviceId).toString(cryptoJs.enc.Utf8);
   } catch (e) {
-    return null;
+    return {};
   }
-};
+}
 
@@ -171,3 +171,12 @@ var useLocalStorage = function useLocalStorage(key, initialValue) {
     },
-    getMultiple: function getMultiple(_ref) {},
+    getMultiple: function getMultiple(keys) {
+      var result = {};
+      if (!data) return {};
+      keys.forEach(function (key) {
+        if (data.hasOwnProperty(key)) {
+          result[key] = data[key];
+        }
+      });
+      return result;
+    },
     getItem: function getItem(key) {
@@ -177,5 +186,8 @@ try {
       } catch (e) {
-        return false;
+        return null;
       }
     },
+    getKey: function getKey() {
+      return keyStorage$1;
+    },
     setItem: function setItem(key, value) {
@@ -186,4 +198,14 @@ var _extends2;
     },
-    removeItem: function removeItem() {},
-    clear: function clear() {}
+    removeItem: function removeItem(key) {
+      if (!data.hasOwnProperty(key)) return;
+
+      var _data = _extends({}, data);
+
+      delete _data[key];
+      setData(_extends({}, _data));
+    },
+    clear: function clear() {
+      setData();
+      localStorage.removeItem(keyStorage$1);
+    }
   };
@@ -190,0 +212,0 @@ return storage;

dist/index.modern.js

@@ -114,3 +114,3 @@ import hash from 'murmurhash-js/murmurhash2_gc';
 
-var getStorage = function getStorage() {
+function getStorage() {
   try {
@@ -120,5 +120,5 @@ var decrypt = cryptoJs.AES.decrypt(localStorage.getItem(keyStorage), deviceId).toString(cryptoJs.enc.Utf8);
   } catch (e) {
-    return null;
+    return {};
   }
-};
+}
 
@@ -169,3 +169,12 @@ var useLocalStorage = function useLocalStorage(key, initialValue) {
     },
-    getMultiple: function getMultiple(_ref) {},
+    getMultiple: function getMultiple(keys) {
+      var result = {};
+      if (!data) return {};
+      keys.forEach(function (key) {
+        if (data.hasOwnProperty(key)) {
+          result[key] = data[key];
+        }
+      });
+      return result;
+    },
     getItem: function getItem(key) {
@@ -175,5 +184,8 @@ try {
       } catch (e) {
-        return false;
+        return null;
       }
     },
+    getKey: function getKey() {
+      return keyStorage$1;
+    },
     setItem: function setItem(key, value) {
@@ -184,4 +196,14 @@ var _extends2;
     },
-    removeItem: function removeItem() {},
-    clear: function clear() {}
+    removeItem: function removeItem(key) {
+      if (!data.hasOwnProperty(key)) return;
+
+      var _data = _extends({}, data);
+
+      delete _data[key];
+      setData(_extends({}, _data));
+    },
+    clear: function clear() {
+      setData();
+      localStorage.removeItem(keyStorage$1);
+    }
   };
@@ -188,0 +210,0 @@ return storage;

dist/utils/syncStorage.d.ts

 declare const setStorage: (value: any) => void;
-declare const getStorage: () => any;
+declare function getStorage(): object;
 export { getStorage, setStorage };

package.json

 {
   "name": "react-storage-kit",
-  "version": "0.0.1",
-  "description": "Localstorage Library for React Js",
+  "version": "0.0.2",
+  "description": "Local storage encryption Library for React Js",
   "author": "l1ttps",
@@ -54,2 +54,3 @@ "license": "MIT",
     "gh-pages": "^2.2.0",
+    "gulp": "^4.0.2",
     "microbundle-crl": "^0.13.10",
@@ -56,0 +57,0 @@ "npm-run-all": "^4.1.5",

README.md

@@ -1,30 +0,169 @@
-# react-storage-kit
+<p align="center">
+    <img src="https://raw.githubusercontent.com/l1ttps/react-storage-kit/main/docs/banner.png" alt="React Auth Kit Banner"/>
+</p>
 
-> Made with create-react-library
-
 [![NPM](https://img.shields.io/npm/v/react-storage-kit.svg)](https://www.npmjs.com/package/react-storage-kit) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
 
-## Install
+## 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
+
 ```bash
-npm install --save react-storage-kit
+npm install --save react-storage-kit 
+
+or
+
+yarn add react-storage-kit 
 ```
 
-## Usage
+## Usage with Hook
 
 ```tsx
-import React, { Component } from 'react'
+import React, { useState } from 'react'
+import { useStorageKit } from 'react-storage-kit'
 
-import MyComponent from 'react-storage-kit'
-import 'react-storage-kit/dist/index.css'
+// inside your function component  
+const storage = useStorageKit()
+```
 
-class Example extends Component {
-  render() {
-    return <MyComponent />
-  }
+
+<hr/>
+
+#### getAll()
+Return all value in Storage Kit
+```tsx
+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;
 ```
 
+<hr/>
+
+#### getMultiple(`string[]`)
+Return multiple value  in Storage Kit
+
+```tsx
+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;
+```
+
+
+<hr/>
+
+#### setItem(`key: string`,`value: object | string | number`)
+Set key value  StorageKit
+
+```tsx
+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;
+```
+
+
+<hr/>
+
+#### removeItem(`key: string`)
+Delete a value in StorageKit 
+
+```tsx
+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;
+```
+
+<hr/>
+
+#### clear()
+delete all values ​​stored in StorageKit
+
+```tsx
+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](https://github.com/l1ttps)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

41192

increased by14.75%

Lines of code

383

increased by7.28%

Number of lines in readme file

170

increased by448.39%

Worsened metrics

Dev dependency count

32

increased by3.23%

Number of package files

12

decreased by-25%

No dependency changes