[JS]JavaScriptオブジェクト、ブラウザリポジトリ、JSON

16135 ワード
TIL テキストリンク

1.JavaScriptオブジェクト


関連するデータと関数のセット
⌝通常は複数のデータと関数で構成され、オブジェクトでは一般的にPropertyとMethodと呼ばれます.
ソース:MDN、JavaScriptオブジェクトデフォルト

ㄴ対象スペクトルデータ+関数


0)JavaScriptオブジェクトタイプ


  • 埋め込みオブジェクト
    : window , document , history , location , ...

  • JS APIを受信して生成されたオブジェクト
    : Date , Number , String , Array , ...

  • ユーザー構成で作成されたオブジェクト
    :生成構文に基づいて、開発者は表示のみを使用してオブジェクトを作成し、クラス設計/クラス設計を使用しません.JSON(JavaScript Object Notion) , 객체 리터럴 , ...

    • 1）対象共通

    //obj1 변수 선언과 동시에 속성 3개로 생성되는 객체
let obj1 = {
   //변수, property(속성) : 값
   name2 : '유재석',
   age : 48,
   info : function(){
   //함수 내부에서 해당 객체의 변수값 활용시에는 this 즉 객체 자체를 의미하는 키워드 필수
      console.log(1 + ' ' + this.name2); //1 유재석
      return '이영자';
      }
   }
   
console.log(obj1);//{name2: '유재석', age: 48, info: ƒ}
console.log(typeof(obj1)); //object
console.log(obj1.info()); //이영자
        
//이미 생성된 객체에 속성 추가 가능
//새로운 속성(변수) 추가 및 값 대입(초기화)
obj1.address = '남부터미널'; 
        
//객체 내에 이미 존재하는 속성 삭제 가능
delete obj1.address;

    2) JSON

    let obj2 = {"k1":"v1", "k2":"v2", "k3":"v3"};
console.log(obj2.k1);  //v1

    3）JSON方案

    let obj3 = [ 
   {"k1":"v11", "k2":"v2", "k3":"v31"},
   {"k1":"v21", "k2":"v2", "k3":"v32"},
   {"k1":"v31", "k2":"v2", "k3":"v33"}
];

console.log(obj3);  
console.log(obj3[2].k3); //v33

obj3[1].k2 = '유재석';
console.log(obj3[1]); //{k1: 'v21', k2: '유재석', k3: 'v32'}

    4）JS方案

    let arr1 = [1, 2, 3, 4, 5];

console.log(arr1, arr1.length, arr1[0]); 
//Array(5)0: 11: 22: 33: 44: 5
//length: 5
//[[Prototype]]: Array(0) 5 1

    2.ブラウザストレージ


    ドメイン固有のデータをサーバではなくクライアントWebブラウザに格納するための機能(🍪Cookieに似ています)
    データをペアで格納し、鍵に基づいてデータを問合せます.
    Cookieと同様にドメイン単位でアクセスを制限する(Aドメインに格納されているデータはBドメインでクエリーできない)
    2つを単独で使用し、データの持続性に応じて選択します.
    しばらく🖐, key, valueCookieとWeb Storageはブラウザに保存されていますが、Cookieには次のような欠点があります.
    Webストレージを使用することで、これらのCookieの欠点を克服することができます.
  • 4 KBのデータ格納制限
  • CookieはHTTPリクエストで暗号化されていないため、セキュリティが非常に悪い
    • である.
  • CookieはすべてのHTTP要求に含まれており、Webサービス性能
    • に影響を与える可能性がある.
    ソース:Eログ、ブラウザリポジトリ-ローカルストレージ、SessionStorage、Cookie

    1）ローカルストレージ（永続ストレージ）


    🌈 ブラウザのローカルストレージにデータを格納
    🌈 ブラウザを終了→データプール(ブラウザが終了しても保持されます)
  • データストア
    • localStorage.setItem("k1", "v1");
localStorage.setItem("k2", "v2");
localStorage.setItem("k3", "v3");
  • データ照会
    • localStorage.getItem("k2"); //v2

    2）SessionStorage（一時記憶）


    🌈 ブラウザ・セッション・ストレージにデータを格納
    🌈 ブラウザを終了→データ❌(ブラウザを終了すると自動的にデータが解放される)
  • データストア
    • sessionStorage.setItem("k1", "재석");
sessionStorage.setItem("k2", "종원");
  • データ照会
    • sessionStorage.getItem("k2"); //종원

    3. JSON


    ✅ JavaScript Object Notation
    軽量データ交換フォーマット
    ⌝現在最も一般的なデータフォーマット

    0)データフォーマット変更フロー


  • 第1世代:csvエンドで開発すると、各データが混乱します.영구저장소(LocalStorage) 임시저장소(SessionStorage)

  • 第2世代:브라우저 저장소가 필요한 이유フォーマットで、明確に区別できます
    しかし,xmlからデータを抽出するアプリケーションの開発は容易ではなく,非常に煩雑である.
    • <person>
  <name>유재석</name>
  <address>남부터미널</address>
  <age>48</age>
  <birthYear>1976</birthYear>
</person>
  • 第3世代:key-value xml、データ区分がより明確(キーワード別)、伝送速度がより速く、より軽く
    let person = {"name":"유재석", "address":"남부터미널", "age":48, "birthYear":1976}

    1）JSONの勉強

  • 標準(二重引用符):유재석, 남부터미널, 48, 1976→ object
  • 使用可能(一重引用符):남부터미널, 신동엽, 48, 1976→ object
  • 使用不可(フル引用符):xml→nameとageに区別できない純文字列

    • JSONstring→jsonタイプに変換


    JSON解析できない場合はeval()と見なします。


    ㄴできるだけ最初からjson標準タイプ、変換可能タイプを作成します(二重引用符を使用します)


    2)eval()関数(マッピング)🔥)

  • 文字列(String)は、実行コード(計算可能)
    • に変換することができる.
  • JavaScriptはブラウザに由来するため、eval()パラメータ
    • として悪意のあるコードが導入される可能性がある.
    eval()関数の使用は推奨されません
  • セキュリティ
    • MFCツールバーにEditBoxとButtonを追加
    Java 16日目