useLocalStorage

import { useState, useEffect } from "react";

function getValue(key, initailValue) {
  const storedValue = JSON.parse(localStorage.getItem(key));
  if (storedValue) return storedValue;

  if (initailValue instanceof Function) return initailValue();
  return initailValue;
}

export default function useLocalStorage(key, initailValue) {
  const [value, setValue] = useState(() => {
    return getValue(key, initailValue);
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [value]);

  return [value, setValue];
}

import { useState, useEffect, useRef } from "react";
export default function App() {
  const [day, setDay] = useState("Monday");
  const prevDay = usePrevious(day);
  const getNextDay = () => {
    if (day === "Monday") {
      setDay("Tuesday")
    } else if (day === "Tuesday") {
      setDay("Wednesday")
    } else if (day === "Wednesday") {
      setDay("Thursday")
    } else if (day === "Thursday") {
      setDay("Friday")
    } else if (day === "Friday") {
      setDay("Monday")
    }
  }
  return (
    <div style={{padding: "40px"}}>
      <h1>
        Today is: {day}<br />
        {
          prevDay && (
            <span>Previous work day was: {prevDay}</span>
          )
        }
      </h1>
      <button onClick={getNextDay}>
        Get next day
      </button>
    </div>
  );
}
function usePrevious(val) {
  const ref = useRef()

  useEffect(() => {
    ref.current = val
  }, [val])
  return ref.current
}

/**
 * ## StorageBin
 * A localStorage wrapper with a cookie fallback
 * 
 * All methods checks for localStorage support first
 * 
 * If no support is found then all methods will 
 * fallback to implementing cookies instead.
 */
const prefs = new function StorageBin () {
    let self = this,
        test = "a";

    const supported = () => {
        let granted;
        try {
            window.localStorage.setItem(test, test);
            window.localStorage.removeItem(test);
            granted = true;
        } catch (e) {
            granted = false;
        }
        return granted;
    };

    /**
     * Stores the specified key/value pair allowing
     * for the following types: <em>string</em>, <em>number</em>,
     * <em>boolean</em>, <em>object</em>, and <em>array</em>.<br />
     * If no key is supplied and only an object is passed,
     * this function acts as an alias for <code>StorageBin.store()</code>.
     * 
     * @param {string/int/boolean/object/array} key 
     * @param {object/string} value
     */
    StorageBin.prototype.set = function(key, value) {
        if (supported) {
            if (arguments.length === 1) {
                self.store(key);
            } else if (typeof key === "string") {
                if (typeof value === "object") {
                    value = JSON.stringify(value);
                }
                window.localStorage.setItem(key, value);
            } else {
                throw new TypeError("Failed to execute StorageBin.set(): one or more arguments are invalid");
            }
        } else {
            document.cookie = key + "=" + value + "; path=/";
        }
    };

    /**
     * Stores the object in localStorage, allowing access to individual object properties
     * @param {object} value
     */
    StorageBin.prototype.store = function(value) {
        if (typeof value === "object" && !(value instanceof Array)) {
            for (const property in value) {
                if(value.hasOwnProperty(property)) {
                    window.localStorage.setItem(property, value[property]);
                }
            }
        } else {
            throw new TypeError("Failed to execute StorageBin.store(): argument must be of type object! " + typeof(value) + " given.");
        }
    };
    
    /**
     * Returns the value of a specified key in localStorage.
     * This value is converted to its proper type upon retrieval.
     * If the key is not in local storage, then defaultValue is
     * returned if specified.
     * @param key
     * @param defaultValue
     * @returns {string|boolean|null|number|any}
     */
    StorageBin.prototype.get = function(key, defaultValue) {
        if (supported) {
            if (typeof key !== "string") {
                throw new TypeError("Failed to execute StorageBin.get(): key must be of type string! " + typeof(key) + " given.");
            }

            let value = window.localStorage.getItem(key); // retrieve value
            let number = parseFloat(value); // to allow for number checking

            if (value === null) {
                // Returns default value if key is not set, otherwise returns null
                return arguments.length === 2 ? defaultValue : null;
            } else if (!isNaN(number)) {
                return number; // value was of type number
            } else if (
                value.toLowerCase() === "true" ||
                value.toLowerCase() === "false"
            ) {
                return value === "true"; //value was of type boolean
            } else {
                try {
                    value = JSON.parse(value);
                    return value;
                } catch (e) {
                    return value;
                }
            }
        } else {
            let key_equals = key + "=",
                cookies = document.cookie.split(";");
            for (let i = 0, j = cookies.length; i < j; i++) {
                let this_cookie = cookies[i];
                while (this_cookie.charAt(0) === " ") {
                    this_cookie = this_cookie.substring(1, this_cookie.length);
                }
                if (this_cookie.indexOf(key_equals) === 0) {
                    return this_cookie.substring(
                        key_equals.length,
                        this_cookie.length
                    );
                }
            }
            return null;
        }
    };

    /**
     * Returns an array of keys currently stored in localStorage
     * @returns {*[]}
     */
    StorageBin.prototype.getKeys = function() {
        let result = [];
        for (let i = 0; i < window.localStorage.length; i++) {
            result.push(window.localStorage.key(i));
        }
        return result;
    };

    /**
     * Checks if localStorage contains the specified key
     * @param {string} key
     * @returns {boolean}
     */
    StorageBin.prototype.contains = function(key) {
        if (typeof key !== "string") {
            throw new TypeError("Failed to execute StorageBin.contains(): key must be of type string! " + typeof(key) + " given.");
        }
        return self.getKeys().indexOf(key) !== -1;
    };

    /**
     * Removes the specified key/value pair from localStorage given a key<br/>
     * Optionally takes an array to remove key/value pairs specified in the array
     * @param {string/array} key
     */
    StorageBin.prototype.del = function(key) {
        if (supported) {
            if (typeof key === "string") {
                window.localStorage.removeItem(key);
            } else if (key instanceof Array) {
                for (let i = 0; i < key.length; i++) {
                    if (typeof key[i] === "string") {
                        window.localStorage.removeItem(key[i]);
                    } else {
                        throw new TypeError("Failed to execute StorageBin.del(): the array key at index " + i + " must be of type string! " + typeof(key[i]) + " given.");
                    }
                }
            } else {
                throw new TypeError("Failed to execute StorageBin.del(): key must be of type string! " + typeof(key) + " given.");
            }
        } else {
            self.set(key, "");
        }
    };

    /**
     * An alias for <code>StorageBin.clear()</code>
     */
    StorageBin.prototype.empty = function() {
        self.clear();
    };

    /**
     * Removes all key/value pairs from localStorage
     */
    StorageBin.prototype.clear = function() {
        if (supported) {
            window.localStorage.clear();
        } else {
            let cookies = document.cookie.split(";");
            let i = 0,
                j = cookies.length;
            for (; i < j; i++) {
                let this_cookie = cookies[i];
                let equals_position = this_cookie.indexOf("=");
                let name =
                    equals_position > -1 ? this_cookie.substr(0, equals_position) : this_cookie;
                document.cookie =
                    name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT";
            }
        }
    };

    /**
     * Returns an object representation of the current state of localStorage
     * @returns {{}}
     */
    StorageBin.prototype.toObject = function() {
        const o = {};
        const keys = self.getKeys();

        for (let i = 0; i < keys.length; i++) {
            const key = keys[i];
            o[key] = self.get(key);
        }
        return o;
    };
}();

localStorage.setItem("name", "John Doe");

localStorage.getItem("name");

{exp:structure:breadcrumb}

function doFirst(){
    var button = document.getElementById('button');
    button.addEventListener("click",save,false);
}

function save(){
    var FirstName = document.getElementById('FName').value;
    var LastName = document.getElementById('LName').value;
    localStorage.setItem(FirstName, LastName);
}


if(sessionStorage && window.onload === true){
    sessionStorage.clear('Fname', 'LName');
}

window.addEventListener("load",doFirst,false);

  const getMovies = async (url) => {
    setError(null);
    try {
      const response = await fetch(url);

      if (!response.ok) {
        throw new Error("Something went wrong!");
      }

      const data = await response.json();
      
      if (data.results.length === 0) {
        throw new Error("Sorry, no movies were found.");
      }
      
      const transformedMovies = data.results.map((movie) => {
        return {
          id: movie.id,
          title: movie.title,
          description: movie.overview,
          rating: movie.vote_average,
          genres: movie.genre_ids,
          poster_path: movie.poster_path,
          backdrop_path: movie.backdrop_path,
          year: movie.release_date
        }
      })
      setTotalPages(data.total_pages);
      setMovies(transformedMovies);
      chooseMovie(transformedMovies);
    } catch (errorThrown) {
      setError(errorThrown.message);
    }
  }

  def search
    baseurl = "https://api.themoviedb.org/3/discover/movie?api_key=#{ENV['REACT_APP_TMDB_API_KEY']}&language=en-						US&sort_by=popularity.desc&with_watch_monetization_types=flatrate&include_adult=false&include_video		=false&page=${moviePageIndex}";
    urladdon = params[:urlAddon]

    require 'uri'
    require 'net/http'

    uri = URI("#{baseurl}#{urladdon}")
    res = Net::HTTP.get_response(uri)

    if res.is_a?(Net::HTTPSuccess)
      render json: res.body
    else
      render json: res.body, status: :bad_request
    end
  end

const rootDomElement: any = document.getElementById('root');
const newBlock = (
      <div>
        <p>The New Content</>
      </div>
  );
ReactDOM.createPortal(newBlock, rootDomElement);


// you can return it too
// return ReactDOM.createPortal(PDFPopup, RootDomElement);

function getFromLS(key) {
  let ls = {};
  if (global.localStorage) {
    try {
      ls = JSON.parse(global.localStorage.getItem('rgl-8')) || {};
    } catch (e) {}
  }
  return ls[key];
}
function saveToLS(key, value) {
  if (global.localStorage) {
    global.localStorage.setItem(
      'rgl-8',
      JSON.stringify({
        [key]: value,
      }),
    );
  }
}