簡単なフックでクッキー管理を反応させてください

3951 ワード

react javascript typescript テキストリンク

このブログ記事は、react-cookie-serviceライブラリから簡単なフックを使用して反応アプリケーションでクッキーを維持するプロセスを説明します

react-cookie-serviceは、クッキーを読んで、セットして、削除するのを助ける5つのフックによる単純な反応図書館です

チェック

GetCookie

getallcookie

SetCookie

deletecookie

DeleteAllCookie

用途

NPMまたは糸コマンドを使用してライブラリをインストールする

npm install --save @ngxsmart/react-cookie-service

or

yarn add @ngxsmart/react-cookie-service

getallcookie

コンポーネントにgetAllCookiesフックをインポートします.GetAllcookieクッキーはウェブサイトのすべてのクッキーを返します.下記参照

import React, { Component } from 'react';
import { useCookies } from '@ngxsmart/react-cookie-service';
export default function Example() {
  const { getAllCookies } = useCookies();
  return (
    <div>
      <h2>{JSON.stringify(getAllCookies)}</h2>
    </div>
  );
}

getcookie

クッキーを文字列形式で返す名前で1つの特定のクッキーを得るために

import React, { Component } from 'react';
import { useCookies } from '@ngxsmart/react-cookie-service';
export default function Example() {
  const { getCookie } = useCookies();
  return (
    <div>
      <h2>{JSON.stringify(getCookie('test'))}</h2>
    </div>
  );
}

チェック

指定されたクッキーが存在するかどうかを調べるためにgetCookieフックを使用します.存在する場合、チェックフックはtrueを返します

import React, { Component } from 'react';
import { useCookies } from '@ngxsmart/react-cookie-service';
export default function Example() {
  const { check } = useCookies();
  return (
    <div>
      <h2>{JSON.stringify(check('test'))}</h2>
    </div>
  );
}

setcookie

クッキーをセットするためにcheckフックを使用してください.setCookieは以下の引数を受け付けます.nameとvalueだけが必須であり、残りはオプションです.

name: string,    
value: string,    
expiresOrOptions?: number | Date | any,   
/* Number of days until the cookies expires or an actual `Date`  */
path?: string,
/* Cookie path. Defaults to '/' */
domain?: string,    
/* Cookie domain. Defaults to website domain */
secure?: boolean,    
/* defaults to false */
sameSite?: 'Lax' | 'None' | 'Strict' 
/* Defaults to `Lax` */

例:
デフォルトオプションでクッキーを設定する

setCookie('token', response.data.token);
setCookie('isLoggedIn', 'true');

2日で期限切れになる安全なクッキーをセットしてください

setCookie('token', response.data.token,{ expires: 2, domain: '/', secure: true, sameSite: 'Lax' } );

DeleteCookieと削除

を使用してクッキーを削除する

import React, { Component } from 'react';
import { useCookies } from '@ngxsmart/react-cookie-service';
export default function Example() {
  const { deleteCookie, deleteAllCookies } = useCookies();
useEffect(()=>
{
setCookie('token', response.data.token);
setCookie('isLoggedIn', 'true');
deleteCookie('token');
deleteAllCookies();
},[]);
  return (
    <div>
      <h2>Delete All Cookies</h2>
    </div>
  );
}

このライブラリのソースコードはGithubにあります.ハッピーコーディング

Reference

この問題について(簡単なフックでクッキー管理を反応させてください), 我々は、より多くの情報をここで見つけました https://dev.to/pavankjadda/react-cookies-management-with-simple-hooks-3h5i

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

反応とスタイルのコンポーネントを使用してPDFを生成する

タスクはiOS 15の新しいビューモディファイアです.スウィフト