Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mrwilbroad/localstorage-web-api
Reactjs + typescript + vite illustration of Web Storage Api
https://github.com/mrwilbroad/localstorage-web-api
mozilla reactjs typescript vite
Last synced: about 2 months ago
JSON representation
Reactjs + typescript + vite illustration of Web Storage Api
- Host: GitHub
- URL: https://github.com/mrwilbroad/localstorage-web-api
- Owner: mrwilbroad
- Created: 2023-12-08T02:04:25.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2023-12-08T02:10:04.000Z (about 1 year ago)
- Last Synced: 2023-12-08T03:23:42.547Z (about 1 year ago)
- Topics: mozilla, reactjs, typescript, vite
- Language: TypeScript
- Homepage: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
- Size: 39.1 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Web Storage API
The localStorage Web API serves as a persistent storage mechanism within web browsers, allowing websites to store key-value pairs locally on a user's device. It maintains data even after the browser window is closed and reopened, offering a convenient way to save information for future visits. This API operates on a simple key-value structure, enabling developers to store strings representing data such as user preferences, settings, or small amounts of application-specific data. While localStorage is accessible across sessions for a specific domain, it’s important to note that it's limited to string values, requiring serialization (e.g., via JSON.stringify()) for complex objects or arrays before storage. Its ease of use, through methods like setItem() and getItem(), makes it a commonly employed tool for retaining non-sensitive user-specific data between visits to a website.
## in addition
However, it's crucial to exercise caution with localStorage due to its accessibility via JavaScript, as any script running on the same domain can access this stored data. Consequently, sensitive information like passwords or confidential user data should not be stored using localStorage. The Same-Origin Policy restricts access to localStorage from different domains, ensuring security within the bounds of a single website but necessitating diligence in handling potentially sensitive information to mitigate any potential risks.
Definition if type for Item to be saved locally
```ts
export type ItemType = {
name: String;
value: String ;
};
export type ItemArray = ItemType[];
```
```js
const Home = () => {
const [items, setItems] = useState([] as ItemArray);
const SaveLocally = () => {
if (!get()) {
var startdata = {
name: `Test-${Math.random() * 100}`,
value: `Value-${Math.random() * 100}`,
};
StoreLocally([startdata]);
setItems([startdata]);
} else {
let data_item: ItemArray = get()!;
var Item = {
name: `Test-${Math.random() * 100}`,
value: `Value-${Math.random() * 100}`,
};
data_item.push(Item);
StoreLocally(data_item);
setItems(data_item);
}
};
const StoreLocally = (data: ItemArray): null => {
localStorage.setItem("user_data_local", JSON.stringify(data));
return null;
};
const get = (): null | ItemArray => {
if (window.localStorage.getItem("user_data_local")) {
return JSON.parse(window.localStorage.getItem("user_data_local")!);
}
return null;
};
const ClearCache = ()=> {
localStorage.clear();
}
useEffect(() => {
if (get()) {
setItems(get()!);
}
}, []);
return (
Local storage usage..
Save locally!
Clear cache!
{items!.length > 0 &&
items!.map((item, index) => {
return (
-
{item.name} : {item.value}
);
})}
);
};
```
## regard
mrwilbroad