Html5에서 localStorage 사용에 대한 자세한 설명

이번에는 Html5에서 localStorage 사용에 대한 자세한 설명을 가져왔습니다. Html5에서 localStorage를 사용할 때 주의 사항은 무엇입니까? 다음은 실제 사례입니다. localStorage는 HTML5에 새로 추가된 기능입니다. 이 기능은 주로 브라우저 로컬 저장소에 사용됩니다

1. 브라우저가 localStorage

  if (!window.localStorage) {        console.log("浏览器不支持localStorage")
    } else {        console.log("浏览器支持localStorage")
    }

2를 지원하는지 확인합니다.

  var DemoStorage = window.localStorage;    //写入方法1：
    DemoStorage.name = "Tom";    //写入方法2：
    DemoStorage["age"] = 18;    //写入方法3：
    DemoStorage.setItem("hobby", "sport");    
    console.log(DemoStorage.name,typeof DemoStorage.name);    console.log(DemoStorage.age, typeof DemoStorage.age);    console.log(DemoStorage.hobby, typeof DemoStorage.hobby);    /*输出结果:
    Tom string
    18 string
    sport string*/

위 코드의 예 매체: age의 입력은 숫자이지만 출력은 문자열인 것을 보면 localStorage는 문자열 형태의 데이터만 저장할 수 있음을 알 수 있다.

3. localStorage의

Delete

: 1. localStorage의 모든 콘텐츠 삭제:

Storage.clear()는 매개 변수를 허용하지 않지만 도메인 이름에 해당하는 전체 저장소

객체

를 지웁니다.

 var DemoStorage = window.localStorage;    
    DemoStorage.name = "Tom";
    DemoStorage.age = 18;
    DemoStorage.hobby = "sport";    
    console.log(DemoStorage);    //输出：Storage {age: "18", hobby: "sport", name: "Tom", length: 3}
    DemoStorage.clear();    console.log(DemoStorage);    //输出: Storage {length: 0}

2. 키-값 쌍 삭제:

Storage.removeItem()은 제거하려는 데이터 항목의 키인 매개변수를 수락한 다음 도메인 이름에 해당하는 저장소 개체에서 해당 데이터 항목을 이동합니다. 제거하다.

   var DemoStorage = window.localStorage;
    DemoStorage.name = "Tom";
    DemoStorage.age = 18;
    DemoStorage.hobby = "sport";    console.log(DemoStorage);    //输出：Storage {age: "18", hobby: "sport", name: "Tom", length: 3}
    DemoStorage.removeItem("age");    console.log(DemoStorage);    //输出：Storage {hobby: "sport", name: "Tom", length: 2}

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

요소의 JavaScript 코드를 하나씩 숨기기

javscript의 콜백 함수에 대한 자세한 설명

위 내용은 Html5에서 localStorage 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!