html5의 로컬 저장소는 무엇입니까?

html5 로컬 저장소에는 다음이 포함됩니다. 1. 수명 주기가 영구적인 localStorage. localStorage 정보가 적극적으로 삭제되지 않는 한 이 정보는 영원히 존재합니다. 2. 현재 세션에서만 유효하며 페이지를 닫은 후에 삭제되는 sessionStorage. 또는 브라우저.

이 튜토리얼의 운영 환경: Windows 7 시스템, HTML5 버전, Dell G3 컴퓨터.

HTML5 웹 저장소는 localStorage 및 sessionStorage를 포함하여 클라이언트에 저장되는 로컬 저장소입니다. HTML5 웹 저장소는 키/값 쌍 형태로 저장되며 일반적으로 문자열로 저장됩니다.

localStorage

localStorage 수명 주기는 영구적입니다. localStorage 정보가 적극적으로 삭제되지 않는 한 이 정보는 영원히 존재합니다. 저장되는 데이터의 크기는 일반적으로 5MB이며, 클라이언트(즉, 브라우저)에만 저장되며 서버와의 통신에는 참여하지 않습니다.

        // 1、保存数据到本地
        // 第一个参数是保存的变量名，第二个是赋给变量的值
        localStorage.setItem('Author', 'local');
        // 2、从本地存储获取数据
        localStorage.getItem('Author');
        // 3、从本地存储删除某个已保存的数据
        localStorage.removeItem('Author');
        // 4、清除所有保存的数据
        localStorage.clear();

sessionStorage

sessionStorage는 현재 세션에서만 유효하며 페이지나 브라우저를 닫으면 지워집니다. 저장되는 데이터의 크기는 일반적으로 5MB이며, 클라이언트(즉, 브라우저)에만 저장되며 서버와의 통신에는 참여하지 않습니다.

        // 1、保存数据到本地
        // 第一个参数是保存的变量名，第二个是赋给变量的值
        sessionStorage.setItem('Author', 'session');
        // 2、从本地存储获取数据
        sessionStorage.getItem('Author');
        // 3、从本地存储删除某个已保存的数据
        sessionStorage.removeItem('Author');
        // 4、清除所有保存的数据
        sessionStorage.clear();

복잡한 데이터 저장

위 내용은 모두 단순 데이터 형태의 저장이지만, 저장하는 데이터가 객체나 배열인 경우 직접 저장이 불가능합니다

잘못된 저장 :

    var user = {
      username: 'liu',
      password: '123456'
    };
    sessionStorage.setItem('user', user);
    console.log(sessionStorage.getItem('user'));

이때 데이터 형식을 변환해야 합니다.

데이터 저장 전: JSON.stringify를 사용하여 객체를 문자열로 변환

데이터를 얻은 후: JSON.parse를 사용하여 문자열을 객체로 변환

    var user = {
      username: 'liu',
      password: '123456'
    };
    user = JSON.stringify(user);
    sessionStorage.setItem('user', user);
    var account = sessionStorage.getItem('user');
    console.log(account);
    account = JSON.parse(account)
    console.log(account);

권장 튜토리얼: " html 비디오 튜토리얼》

위 내용은 html5의 로컬 저장소는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!