HTML5 웹

쿠키 보다 나은 로컬 저장 방법인 HTML5 웹 저장소 . HTML5를 사용하여 사용자 검색 데이터를 로컬에 저장합니다.

이전에는 로컬 저장소에서 쿠키를 사용했습니다 . 그러나 웹 저장소는 더 안전하고 빨라야 합니다 . 이러한 데이터는 서버에 저장되지 않고 사용자가 웹 사이트 데이터를 요청할 때만 사용되며 웹 사이트 성능에 영향을 주지 않으면서 많은 양의 데이터를 저장할 수도 있습니다 . 데이터는 키 / 값 쌍으로 존재하며 웹 페이지의 데이터는 웹 페이지에서만 액세스하고 사용할 수 있습니다.

(1), localStorage 객체

웹사이트 전체의 데이터를 장기간 저장하기 위해 사용하며, 저장된 데이터는 수동으로 제거하기 전까지 유효기간이 없습니다. localStorage 개체 에 의해 저장된 데이터에는 시간 제한이 없습니다. 데이터는 다음 날, 다음 주 또는 연도에 계속 사용할 수 있습니다.

localStorage 또는 sessionStorage 에 관계없이 사용 가능한 API는 동일하며 일반적으로 사용되는 API는 다음과 같습니다( 예를 들어 localStorage 사용).

저장 데이터: localStorage.setItem(key,value);

데이터 읽기: localStorage.getItem(key);

단일 항목 삭제: localStorage.removeItem(key);

모든 데이터 삭제: localStorage.clear();

색인의 키 가져오기 : localStorage.key(index);

아래 예는 사용자가 버튼을 클릭한 횟수를 보여줍니다.

<!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">
  <title>Document</title>
</head>
<body>
    <button id="save">保存数据</button>
    <button id="get">读取数据</button>
    <button id="remove">删除单个数据</button>
    <button id="clear">删除所有数据</button>
    <button id="index">获取key值</button>


</body>
<script>

  console.log(localStorage);
  // 一直在浏览器本地存储，除非手动清除掉
  console.log(localStorage.constructor);
  // 1、保存数据：localStorage.setItem(key,value);
  document.getElementById('save').onclick=function(){
    localStorage.setItem('name','小花')
    localStorage.setItem('age',18)
    localStorage.setItem('A',11)
    localStorage.setItem('B',12)
    localStorage.setItem('C',13)
    localStorage.setItem('get11',13)

    console.log(localStorage);
  }
  // 2、读取数据：localStorage.getItem(key);
  console.log(localStorage.getItem('age'));
  console.log(localStorage.getItem('name'));
  // 3、删除单个数据：localStorage.removeItem(key);
  document.getElementById('remove').onclick=function(){
    localStorage.removeItem('name')
    // console.log(localStorage);
    localStorage.removeItem('age')
    console.log(localStorage);

  }
  // 4、删除所有数据：localStorage.clear();
  document.getElementById('clear').onclick=function(){
    localStorage.clear()
    console.log(localStorage);
  }
  // 5、得到某个索引的key：localStorage.key(index);
  document.getElementById('index').onclick=function(){
    console.log(localStorage.key(0));
  }
</script>
</html>

Supongo que te gusta