localStorage

25884 ワード
JavaScript テキストリンク
window.localStorage
前述したように、グローバルオブジェクトとしてのwindowは省略できます.localStorage読み取り専用プロパティを使用して、ドキュメントソースのストレージオブジェクトにアクセスします.保存されたデータは、ブラウザセッション間で共有されます.localStorageはsessionStorageと似ていますが、localStorageのデータは期限切れではなく、sessionStorageのデータはページセッションの終了時(つまりページを閉じる時)に消失します.
myStorage = window.localStorage;
// 현재 출처의 로컬 저장 공간에 접근할 수 있는 Storage 객체.

CRUDメソッド


現在のドメイン内のローカルストレージオブジェクトにアクセスします.

Create


localStorageエントリを追加
(ローカルストレージでcreateを追加したい)
localStorage.setItem('myCat', 'Tom');

Read


上に追加したlocalStorageエントリへのアクセス(読み取り)
const cat = localStorage.getItem('myCat');

Delete


ローカルストレージアイテムの削除
localStorage.removeItem('myCat');

Delete All


すべてのローカルストレージエントリを削除
localStorage.clear();

注意事項


通常のオブジェクトのように使用


localStorageキーを取得または設定する場合は、以下に示すように、通常のオブジェクトと同様の方法を使用できます.
// 키 설정하기
localStorage.test = 2;

// 키 얻기
alert( localStorage.test ); // 2

// 키 삭제하기
delete localStorage.test;
この方法は、互換性が低いため現在もサポートされていますが、以下の理由で推奨されません.
  • ユーザは、lengthまたはtoStringおよびlocalStorageの組み込みメソッドを鍵に設定することができる.これにより、getItem、setItemが正常に動作していても、通常のオブジェクトを処理するようにエラーが発生する可能性があります.
    • let key = 'length';
localStorage[key] = 5; // TypeError: Cannot assign to read only property 'length'...
  • のデータを変更すると、localStorageをオブジェクトとしてアクセスすると、このイベントは発生しません.

    • 巡回キー


    localStorageでは、キーを使用して値を取得、設定、削除できます.では、キー値全体をどのようにして取得しますか?
    残念なことに、ローカルストレージオブジェクトはiterableオブジェクトではありません.
    iterable object
    反復可能オブジェクト(iterable,interruble)は、配列を一般化したオブジェクトである.「かわいい」という概念を使うと、どんなオブジェクトでも...複文に適しています.配列は代表的なかわいい.配列に加えて、多くの組み込みオブジェクトを繰り返すこともできます.文字列もかわいい例です.
    ただし,配列のように処理すれば,完全なキー値を得ることができる.
    for (let i=0; i<localStorage.length; i++) {
  let key = localStorage.key(i);
  alert(`${key}: ${localStorage.getItem(key)}`);
}
    一般オブジェクトの処理と同様に、localStorage反復文でfor keyを使用しても完全なキー値が得られます.ただし、この方法では不要な組み込みフィールドを出力できます.
    // 좋지 않은 방법
for(let key in localStorage) {
  alert(key); 
  // getItem, setItem 같은 내장 필드까지 출력됩니다.
  
  // proxyConsoleLog.js:12 _ym32184394_lsid, 
  // _ym_uid, length, clear, 
  // getItem, key, removeItem, setItem ~~~ 
}
    for keyin localStorageで文を繰り返すには、hasOwnPropertyを使用してプロトコル・タイプから継承フィールドを選択する必要があります.
    for(let key in localStorage) {
  if (!localStorage.hasOwnProperty(key)) {
    continue; // setItem, getItem 등의 키를 건너뜁니다.
  }
  alert(`${key}: ${localStorage.getItem(key)}`);
}
    または次のようにObjectkeysで「自分」のkeyを取得し、巡回する方法を使うこともできます.
    let keys = Object.keys(localStorage);
for(let key of keys) {
  alert(`${key}: ${localStorage.getItem(key)}`);
}
    Object.keysはオブジェクトで定義されたキーのみを返すため、プロトタイプから継承されたキーは無視されます.

    文字列のみ使用


    localStorageのキーと値は文字列でなければなりません.数値やオブジェクトなどの他のデータ型を使用すると、自動的に文字列に変換されます.
    sessionStorage.user = {name: "John"};
alert(sessionStorage.user); // [object Object]
    JSONを使用してオブジェクトを書き込むことができます.
    sessionStorage.user = JSON.stringify({name: "John"});

let user = JSON.parse( sessionStorage.user );
alert( user.name ); // John
    また、ストレージオブジェクト全体を文字列に変換してデバッグすることもできます.

    実習

    <!-- HTML code -->

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width-device-width", initial-scale="1.0">
        <link rel="stylesheet" href="style.css">
        <title>#4</title>
    </head>
</html>

<body>
    <form class="hidden" id="login-form">
        <input 
            required 
            maxlength = "15"   
            type="text" 
            placeholder="what is your name?"
        />
        <button>Log in</button>
    </form>
    <h1 class="hidden" id="greeting"></h1>
    <script src="app.js"></script>
</body>
    // JS code

const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
const greeting = document.querySelector("#greeting");

const HIDDEN_CLASSNAME = "hidden";
const USERNAME_KEY = "username";


function onLoginSubmit(event) {
    event.preventDefault();
    // 브라우저의 기본 동작을 막아준다. => 페이지 새로고침을 막아준다.

    const username = loginInput.value;

    localStorage.setItem(USERNAME_KEY, username);
    paintGreetings(username);
}

function paintGreetings(username) {
    loginForm.classList.add(HIDDEN_CLASSNAME);
    greeting.innerText = `Hello ${username}`;
    greeting.classList.remove(HIDDEN_CLASSNAME);
}

const saveUsername = localStorage.getItem(USERNAME_KEY);

if (saveUsername === null){
    loginForm.classList.remove(HIDDEN_CLASSNAME);
    loginForm.addEventListener("submit", onLoginSubmit);
} else {
    paintGreetings(saveUsername);    
    // 사실 saveUsername은 로컬 스토리지에 저장되어 있으니 
    // 굳이 인자로 전해줄 필요가 없음
    // 근데 그러면 로컬 스토리지를 두 번 열어봐야겠지
}
    反射(3)クラスの属性の反射を理解し,次の属性があればReflectPointのstr内のa->z
    pipenv