https://github.com/wonism/use-memory-storage

React hooks for memory storage is sharing session storage between multiple tabs.
https://github.com/wonism/use-memory-storage

hooks react reactjs session-storage sessionstorage

Last synced: 6 months ago
JSON representation

React hooks for memory storage is sharing session storage between multiple tabs.

• Host: GitHub
• URL: https://github.com/wonism/use-memory-storage
• Owner: wonism
• License: mit
• Created: 2019-10-03T14:13:08.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T10:20:56.000Z (over 2 years ago)
• Last Synced: 2024-04-26T23:40:57.539Z (about 1 year ago)
• Topics: hooks, react, reactjs, session-storage, sessionstorage
• Language: TypeScript
• Size: 411 KB
• Stars: 4
• Watchers: 2
• Forks: 0
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# Use Memory Storage

> React hooks for memory storage is sharing session storage between multiple tabs.

> Ideas from the [blog

> post](https://blog.guya.net/2015/06/12/sharing-sessionstorage-between-tabs-for-secure-multi-tab-authentication/)

> written by [@guy-a](https://github.com/guy-a)

[![npm version](https://badge.fury.io/js/use-memory-storage.svg)](https://badge.fury.io/js/use-memory-storage)

[![Build Status](https://travis-ci.org/wonism/use-memory-storage.svg)](https://travis-ci.org/wonism/use-memory-storage)

## Installation

```sh

$ npm i -S use-memory-storage

```

## Use cases

```tsx

import React, { useState, useEffect, useCallback } from 'react';

import useMemoryStorage from 'use-memory-storage';

const KEY = 'TEST/useMemoryStorage';

const Demo: React.FC = () => {

  const [token, setToken] = useState(null);

  useMemoryStorage(KEY, token, setToken);

  const handleClick = useCallback(() => {

    setToken(Date.now().toString());

  }, []);

  useEffect(() => {

    const storedData = sessionStorage.getItem(KEY);

    if (storedData != null) {

      setToken(storedData);

    }

  }, []);

  useEffect(() => {

    if (token != null) {

      window.sessionStorage.setItem(KEY, token);

    }

  }, [token]);

  return (

    


      


        Click button to generate token in session storage!

      

      

        stored data : {token}

      

      


      

        Click

      

    

  );

}


export default Demo;

```