> 웹 프론트엔드 > H5 튜토리얼 > 웹 스토리지--웹 스토리지에 대한 자세한 소개

웹 스토리지--웹 스토리지에 대한 자세한 소개

PHP中文网
풀어 주다: 2017-06-20 13:55:49
원래의
2184명이 탐색했습니다.
  • 웹 저장소 분류

    • 클라이언트와 서버

  • 웹 저장소 이해

    • 웹 애플리케이션이 발전하면서 예, 클라이언트측 저장소가 점점 더 많이 사용되고 있습니다. 클라이언트 측 스토리지를 구현하는 방법도 점점 더 다양해지고 있습니다. 가장 간단하고 가장 호환성이 좋은 방법은 쿠키이지만 실제 클라이언트로 쿠키를 저장하는 데에는 여전히 많은 단점이 있습니다. 동시에 다양한 브라우저에도 고유한 저장 방법이 있습니다. 예를 들어 userData Behavior는 IE6 이상에서 사용할 수 있고, globalStorage는 Firefox에서 사용할 수 있으며, Flash Local Storage는 Flash 플러그인에서도 사용할 수 있습니다. 그러나 이러한 방법은 호환성 및 기타 측면에서 단점이 있으며, 클라이언트 측에서는 단점이 있습니다. 저장은 최선의 방법에 속하지 않습니다.

    • 위의 상황으로 인해 html5에는 몇 가지 새로운 저장 방법이 추가되었습니다. 웹 데이터베이스 및 웹 스토리지.

  • 다양한 저장방식의 차이

    • 웹스토리지 알아보기

    • 장점

    • 단점

    • localStorage

    • 세션저장 

    • 브라우저 지원

    • 클라이언트가 HTML5에 데이터를 저장하는 새로운 방법으로, 조작하기 쉬운 API를 제공하며 키 값만 설정하면 됩니다. 각 사용자 도메인에 저장되는 데이터 크기는 5M~10M입니다. 아래의 sessionStorage와 localStorage를 포함합니다. 동시에 웹 데이터베이스도 포함됩니다.

    • 저장된 데이터 크기가 더 큽니다.

    • 저장된 데이터는 클라이언트 측에 저장되며 브라우저와 통신할 필요가 없으므로 대역폭 소비를 줄일 수 있습니다.

    • 풍부하고 사용하기 쉬운 API를 제공하여 개발자가 더 쉽게 개발할 수 있습니다.

    • 독립적인 수납공간을 활용해보세요. 각 도메인 아래에는 독립적인 저장공간이 있으며, 각 공간은 완전히 독립되어 있어 데이터의 혼란을 피할 수 있습니다. (실제로 쿠키와 크게 다르지 않습니다.) ​​

    • 각 도메인에 저장된 데이터는 독립된 공간이므로 하나의 도메인 하에서 다른 도메인의 데이터를 사용할 수 없습니다.

    • 저장된 데이터는 당사의 적극적인 삭제 없이 항상 저장되고, 데이터가 암호화되지 않기 때문에 데이터 도난이 발생하기 쉽습니다.

    • localStorage는 시간 제한이 없는 저장 방법으로, 당사가 직접 데이터를 삭제하지 않는 한 데이터가 손실되지 않습니다. ​

    • sessionStorage는 세션을 저장하는 방법으로 브라우저나 작업 창이 닫히면 sessionStorage에 저장된 데이터가 손실됩니다. 동시에 동일한 세션의 페이지에서만 사용할 수 있습니다.

    • IE8.0 이상, Firefox3.0 이상, Opera10.5 이상, Chrome3.0 이상, Safari4.0 이상.

    • 쿠키의 작동 원리

    • 장점

    • 단점

    • 클라이언트 측 저장 방식으로 쿠키는 주로 텍스트 저장 방식을 사용합니다. 응용 프로그램이 쿠키를 사용하면 서버는 쿠키를 클라이언트에 보내고 클라이언트는 이를 저장합니다. 사용자가 다음에 방문할 때 클라이언트에 저장된 쿠키가 서버로 전송됩니다. 개발에서는 사용자 정보를 저장하는 경우가 가장 일반적인 경우입니다.

    • 간단하고 편리함

    • 브라우저는 데이터 전송을 담당합니다

    • 브라우저는 여러 사이트의 데이터를 자체적으로 관리하므로 데이터 혼란이 발생하기 쉽지 않습니다

    • 위에서 언급한 것처럼 , 쿠키의 작동 원리는 서버에서 클라이언트로, 클라이언트에서 서버로 통신하는 것입니다. 이로 인해 불필요한 대역폭 소비가 발생하고 페이지 로딩 속도에도 영향을 미쳐 사용자 경험이 저하됩니다.

    • 저장된 데이터 크기 제한, 쿠키는 4kb의 데이터만 저장할 수 있습니다.

    • 보안. 쿠키 데이터는 텍스트 형태로 클라이언트에 저장되기 때문에 보안성이 매우 낮고 쉽게 데이터를 도난당할 수 있습니다.

    • 수량 제한이 있습니다. 대부분의 브라우저가 저장할 수 있는 쿠키 수는 30~50개이며 일부 브라우저는 300개를 지원하는 반면 IE6은 20개만 지원합니다.

    • 데이터 무결성. 클라이언트가 가장 높은 보안 수준으로 설정되면 쿠키가 만료됩니다.​​

    • 쿠키의 장점과 단점

    • 웹 저장소의 장점과 단점

  • 예제 코드

    • 참고: localStorage와 sessionStorage는 두 문자열 개체를 모두 저장합니다.

    • Create

    • 저장소 가져오기

    • 저장소 삭제

    • <script type="text/javascript">// 创建均使用localStorage做示例,sessionStorage语法方式和localStorage是一样的,localStorage(key, value);或者localStorage.key = "value";window.onload = function(){if (window.localStorage) {
                      localStorage.setItem("userName", "张三");}
              }</script>
      로그인 후 복사

         

    • <script type="text/javascript">window.onload =  (window.localStorage &&"userName", "张三""userName"</script>
      로그인 후 복사

       


    • <script type="text/javascript">window.onload =  (window.localStorage &&"userName", "hello,world!"</script>
      로그인 후 복사

        


    • 현재 브라우저가

    •     <script type="text/javascript">// 验证当前的浏览器是否支持localStorage和sessionStoragewindow.onload = function(){if (window.localStorage && window.sessionStorage) {alert("你的浏览器支持localStorage和sessionStorage");
                  }
              }</script>
      로그인 후 복사


을 지원하는지 감지합니다.

위 내용은 웹 스토리지--웹 스토리지에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿