Html5에서 localStorage 사용에 대한 자세한 설명-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

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

php中世界最好的语言

Mar 16, 2018 pm 05:02 PM

h5 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!

핫 AI 도구

뜨거운 도구

뜨거운 주제

Setting up and using Magic Mouse in Windows

Related knowledge

HTML5에서 내비게이션 링크에 NAV 태그를 사용하는 방법 Aug 15, 2025 am 05:55 AM

thetaginhtml5isusedTodefineasectionofmajornavigationLinks, 제공 섭취 구조 가공성;

HTML5의 정의 목록은 무엇입니까? Aug 20, 2025 pm 02:01 PM

adefinitionListInhtml5iscreateDusingTheLementToGroupterms ()가 theIredEfinitions (), 허용 multipleTerMstoshAreadOreAtorMtoHaveMultipleDefinitions, Glossaries, Metadata, 및 Contail -swileimprovingAcccoSandAcccoCsothoand

그림 요소는 무엇이며 HTML5에서 Figcaption과 함께 어떻게 사용됩니까? Aug 20, 2025 pm 02:06 PM

the elementInHtMl5IsUSSSSSS-containedContent-lifeImages, 다이어그램, 오르 코드 니핑은 eptionalElementToprovideAcaptionortitle과 함께, itcanbepaired와 함께 itcanbepaired를 withindicedindinside

HTML5로 웹 사이트에 Favicon을 추가하는 방법 Aug 27, 2025 am 02:35 AM

웹 사이트 Favicon을 올바르게 추가하려면 먼저 32 × 32 또는 64 × 64 x64 픽셀 .ICO, .png 또는 .svg 형식 아이콘 파일 및 이름 IT favicon.ico 등을 준비한 다음 웹 사이트 루트 디렉토리 또는 지정된 경로에 배치 한 다음 HTML 태그에서 명확한 문을 사용하십시오. 예를 들어 : PNG 다양한 크기 버전, SVG 아이콘 및 Apple Touch 아이콘 추가와 같은 여러 형식과 장치를 동시에 지원하는 것이 좋습니다. 마지막으로, 캐시를 지우고 경로가 올바르고 파일에 액세스 할 수 있도록 캐시를 정상적으로 표시하는지 테스트하십시오. 전체 프로세스는 파일 형식, 경로 및 호환성에주의를 기울여야합니다.

HTML5로 사용자 정의 확인란을 만드는 방법 Aug 16, 2025 am 07:05 AM

사용자 정의 확인란을 만들려면 먼저 접근성을 보장하기 위해 레이블이있는 HTML 구조를 사용해야합니다. 2. CSS를 통해 기본 확인란을 숨기고 기능을 유지하십시오. 3. 의사 요소와 의사 클래스를 사용하여 선택한 상태를 사용자 정의 .checkmark 요소에 그리십시오. 4. 대화식 피드백을 향상시키기 위해 호버, 초점 및 선택 스타일을 추가하십시오. 5. 키보드 내비게이션 및 스크린 리더를 지원하기 위해 기본 입력을 유지하고 궁극적으로 아름답고 액세스 가능한 사용자 정의 확인란을 달성하십시오.

html5에서 rel = 'preload'로 컨텐츠를 사전로드하는 방법은 무엇입니까? Aug 20, 2025 pm 04:12 PM

Rel = "Preload"는 페이지 성능을 향상시키기 위해 키 리소스를 미리로드하는 데 사용됩니다. 1. 구문을 사용하고 AS 속성을 지정하십시오. 2. 글꼴, 스타일 시트, 스크립트, 그림 등과 같은 주요 리소스를 예압하며 글꼴을 추가해야합니다. 3. 미디어 속성과 함께 조건에 따라로드 될 수 있습니다. 4. 첫 번째 화면에 주요 리소스 만로드하고 과도한 사용을 피하고 유형 및 크로스 코리 핀을 올바르게 설정하는 모범 사례를 따르십시오. 5. 최신 브라우저는이를 널리 지원하며 JavaScript를 통해 점진적인 향상 처리를 동적으로 추가하거나 수행하여 지원되지 않으면 페이지가 여전히 정상적으로 작동하도록 할 수 있습니다.

HTML5에지도를 어떻게 포함합니까? Aug 16, 2025 am 06:56 AM

Toembedamapinhtml5, useaniframefromgooglemapsbygenerningedteembedeviathegooglemapsembedapiandinsertingitintoyourhtml.2.customizetheiframebyAdjustingwidth, 높이, 스타일, and addingattributeslikeloading = "lazy"및 mmekeitrespress

HTML5에서 자리 표시 자 속성의 목적은 무엇입니까? Aug 31, 2025 am 06:58 AM

PlaceHolderAttributeProvideAshorthintininpepields thatdisappearwehentypingbegins; 1. initusiedIndelementStoshOWexMpleText와 같은 "EnteryOUremail"; 2. theHintisPlayEdonlyWhiledIntImsDisplyBrowser;

See all articles

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

핫 AI 도구

Undress AI Tool

Undresser.AI Undress

AI Clothes Remover

ArtGPT

Stock Market GPT

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제