웹 브라우저의 localStorage에서 데이터를 관리하는 방법은 무엇입니까? JavaScript, React JS로 설명하십시오.

먼저 localStorage에 대해 논의해 보겠습니다. localStorage는 JavaScript 사이트 및 앱이 만료 날짜 없이 웹 브라우저에 키-값 쌍을 저장할 수 있도록 하는 속성입니다. 웹 브라우저 저장 용량의 localStorage는 최대 10MB입니다. LocalStorage 데이터는 localStorage에서 데이터를 삭제할 때까지 만료 날짜가 없습니다. localStorage가 데이터를 영구적으로 보유한다고 말할 수 있습니다. localStorage 데이터는 웹 페이지를 서핑하는 동안 더 나은 사용자 경험을 제공합니다. 이제 장바구니 예제와 JavaScript 라이브러리 React JS 코드를 사용하여 이 localStorage를 살펴보겠습니다.


1단계: localStorage에서 데이터 가져오기
빈 개체shoppingCart로 변수 이름let shoppingCart = {};을 선언합니다. 여기서 let 키워드는 변수 값을 변경할 수 있기 때문에 사용합니다. 화살표 함수 이름addToDb을 작성하고 id라는 매개 변수를 전달합니다(여기서 id는 제품 구성 요소에서 가져옴). 이제 나머지 코드는 화살표 함수 안에 있습니다.

이제 우리는 storedCart 변수const storedCart = localStorage.getItem(‘shopping-cart’);를 사용하여 localStorage에서 데이터를 가져와서 localStorage 변수를 사용하여 데이터가 storedCart에서 사용 가능한지 여부를 if 조건으로 확인해야 합니다. localStorage에서 데이터가 발견되면 JSON.parse() 메서드( shoppingCart = JSON.parse(storedCart); )를 사용하여 데이터를 가져옵니다. 기본적으로 데이터는 localStorage에 json 형식으로 저장되기 때문입니다. 그렇기 때문에 이 데이터를 JavaScript 객체로 변환해야 합니다. localStorage에서 데이터를 가져올 때 JSON.parse() 메서드가 사용되는 이유를 이해했다고 생각합니다. 다른 데이터를 찾을 수 없으면 빈 객체로 설정됩니다( shoppingCart = {} ).

const storedCart = localStorage.getItem('shopping-cart');
if (storedCart) {
    shoppingCart = JSON.parse(storedCart);
}
else {
    shoppingCart = {}
}

Step 2: Add Quantity to the shopping Cart
This part will also be inside the addToDbarrow function.

이제 quantity 로 할당된 변수 이름shoppingCart[id]을 선언합니다. 그런 다음 새 수량이 오는지 여부를 if 조건으로 수량을 확인하십시오. If 새로운 수량이 오면 수량이 1씩 증가합니다. Else 수량이 1로 설정됩니다.

이제 마지막으로 다음 코드localStorage.setItem(‘shopping-cart’, JSON.stringify(shoppingCart));를 사용하여 shoppingCart에 데이터를 설정하고 localStorage에 저장합니다.

여기서 우리는 localstorage에서 데이터를 설정할 때 JSON.stringify를 사용했습니다. 로컬 스토리지에서 데이터가 json 형식으로 저장된다는 것을 알고 있기 때문입니다. 이러한 이유로 JavaScript 개체를 JSON 형식으로 변환해야 합니다. 이것이 JSON.stringify가 사용되는 이유입니다.

const quantity = shoppingCart[id];
if (quantity) {
    const newQuantity = quantity + 1;
    shoppingCart[id] = newQuantity;
}
else {
    shoppingCart[id] = 1;
}
localStorage.setItem('shopping-cart', JSON.stringify(shoppingCart));

Step 3: Remove data from the shopping cart
Following code will help us to remove data from the shopping cart.

const removeFromDb = (id) => {
const storedCart = localStorage.getItem('shopping-cart');
if (storedCart) {
    const shoppingCart = JSON.parse(storedCart);
if (id in shoppingCart) {
    delete shoppingCart[id];
    localStorage.setItem('shopping-cart', JSON.stringify(shoppingCart));
}}}

Step:4 Export this function for the display on UI product component

export { addToDb, removeFromDb };

Full Source Code:

cartdb.js의 소스 코드

// Step1: Get Data From localStorage:
let shoppingCart = {};
const addToDb = (id) => {// get data from local storage
const storedCart = localStorage.getItem('shopping-cart');
if (storedCart) {
   shoppingCart = JSON.parse(storedCart);
}
else {
    shoppingCart = {}
}// Step2: Add Quantity to the shopping Cart:
const quantity = shoppingCart[id];
if (quantity) {
    const newQuantity = quantity + 1;
    shoppingCart[id] = newQuantity;
}
else {
    shoppingCart[id] = 1;
}
localStorage.setItem('shopping-cart', JSON.stringify(shoppingCart));
}// Step3: Remove data from the shopping cart
const removeFromDb = (id) => {
const storedCart = localStorage.getItem('shopping-cart');
if (storedCart) {
    const shoppingCart = JSON.parse(storedCart);
if (id in shoppingCart) {
    delete shoppingCart[id];
    localStorage.setItem('shopping-cart', JSON.stringify(shoppingCart));
}}}// Step:4 Export this function for the display on UI product component
export { addToDb, removeFromDb };

source code inCosmetic.js

import React from 'react';
import { addToDb, removeFromDb } from '../Utilities/cartdb';
import './Cosmetic.css'const Cosmetic = (props) => {
const { name, price, id } = props.cosmetic;const addToCart = (id) => {
    addToDb(id);
}const removeFromCart = (id) => {
    removeFromDb(id);
}return (
    <div className='product'>
    <h3>name: {name}</h3>
    <h4>Price: {price}</h4>
    <p>It has id: {id}</p>
    <button onClick={() => addToCart(id)}>Add to Cart</button>
    <button onClick={() => removeFromCart(id)}>Remove</button>
    </div>
);
};
export default Cosmetic;