웹스토리지 상세 소개 [html5의 로컬 데이터 처리]-H5 튜토리얼-php.cn

집

웹 프론트엔드

H5 튜토리얼

웹스토리지 상세 소개 [html5의 로컬 데이터 처리]

黄舟

Mar 14, 2017 pm 03:51 PM

html5

다음 편집기는 웹 스토리지[html5 로컬 데이터 처리]에 대한 심층 분석을 제공합니다. 편집자님이 꽤 좋다고 생각하셔서 지금 공유하고 모두에게 참고용으로 드리고자 합니다. 에디터와 함께 구경하러 오세요. 모두 즐거운 게임 되시길 바랍니다

1. webStorage란 무엇인가요?

webStorage는 html5에서 지역화된 저장 방식입니다. 이전에는 쿠키;

저장 방식을 사용했습니다. 2. 그들 사이의 차이점은 무엇입니까?

Ⅰ. 쿠키 문제:

ⅰ. 쿠키는 서버에 요청을 보내야 하며, 서버는 브라우저에 저장된 cookieId를 반환합니다. 🎜> 캐시에는 일정량의 대역폭이 필요합니다. [쿠키는 각 HTTP 요청의 헤더 정보와 함께 전송되며 이로 인해 네트워크 트래픽이 눈에 띄게 증가합니다];

ⅱ. 쿠키에 의해 저장되는 데이터 용량은 제한되어 있으며 IE6에서만 저장할 수 있습니다. 약 2K;

II. 그리고 웹 스토리지는 데이터를 로컬에만 저장하면 됩니다.

3. 설명을 위해 간단한 예를 들 수 있습니다.

예: 사용자 이름과 비밀번호를 입력하고

버튼을 클릭하세요. 1 데이터를 저장하고, 버튼 2를 클릭하고 페이지를 새로 고쳐서 가져옵니다.

과정:

ⅰ.

이벤트
만들기

ⅱ. ID를 통해 사용자 이름 가져오기

JavaScript 코드클립보드에 콘텐츠 복사

XML/HTML Code复制内容到剪贴板
function MyClick1()   
{   
}

로그인 후 복사

ⅲ. ID를 통해 비밀번호를 받으세요

JavaScript 코드

클립보드에 콘텐츠 복사

var username = $("#TxtUserName").val();

로그인 후 복사

session

Storege, Firefox2+의 Firefox 브라우저에서 사용;

라이프사이클

: 이렇게 저장된 데이터는 창 수준에서만 유효하며, 동일한 창(또는 탭) 페이지를 새로 고치거나 점프할 때 로컬에 저장된 데이터를 새로 얻을 수 있습니다. 창이나 페이지를 열면 원본 데이터가 무효화됩니다. [현재 페이지만 해당]단점: IE는 이를 지원하지 않으며 지속적인 데이터 저장을 달성할 수 없습니다.

JavaScript 코드

클립보드에 콘텐츠 복사

var pwd = $("#TxtPwd").val();

로그인 후 복사

이는 웹 저장소 인터넷 저장소 사양의 일부이며 이제 Firefox 3.5, Safari 4 및 IE8에서 지원됩니다.

수명주기: 로컬 C 드라이브에 저장되며 브라우저를 닫았다가 연 후에도 그대로 유지됩니다. 웹스토리지 상세 소개 [html5의 로컬 데이터 처리]

단점: 하위 버전의 브라우저에서는 지원하지 않습니다.

아아아앙

ⅴ.인쇄

아아앙

ⅵ. 버튼 2는 위의 모든 데이터를 인쇄합니다

sessionStorage.setItem(
"k_username"
, username);            sessionStorage.setItem(
"k_pwd"
, pwd);

로그인 후 복사

두 번째 인쇄 방법

JavaScript Code复制内容到剪贴板
localStorage.setItem("k_username", username);   
           localStorage.setItem("k_pwd",pwd);

로그인 후 복사

결과는 다음과 같습니다.

JavaScript Code复制内容到剪贴板
alert("保存成功！");

로그인 후 복사

JavaScript Code复制内容到剪贴板
function MyClick2() {   
                alert(sessionStorage.getItem("k_username"));   
                alert(sessionStorage.getItem("k_pwd"));   
            }

로그인 후 복사

로컬 데이터 추적:

웹스토리지 상세 소개 [html5의 로컬 데이터 처리] 결과 표시:

웹스토리지 상세 소개 [html5의 로컬 데이터 처리]

ⅷ.localStorage的clear方法

//如果我想把所有数据都清除？localStorage有个方法

로그인 후 복사

localStorage.clear();

로그인 후 복사

结果显示:

웹스토리지 상세 소개 [html5의 로컬 데이터 처리]

代码显示：

XML/HTML Code复制内容到剪贴板




    
    
    
    


    
        
            用户名:
            
                
            
        
        
            密码:

로그인 후 복사

4.webStorage制作简易留言板[代码为了展示效果所以把js就直接在html里面写]

XML/HTML Code复制内容到剪贴板
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="js/jquery-1.4.1.min.js"></script>
    <script type="text/javascript">
    $(function () {   
        //4.页面刷新之后判断它是否为空？   
        if (localStorage.getItem("k_showCon") != null) {   
            //5.存在，就把获取到的内容存到里面去   
            "k_showCon", $("#showCon").html(localStorage.getItem("k_showCon"));   
        }   
    });   
        function preservationClick()   
        {   
            var sCon = $("#mCon").val();   
            //2.获取到内容之后加到显示p里去？怎么放呢？这里我们用append方法   
            $("#showCon").append("<p>" + sCon + "</p>");   
            //3.预期的是刷新之后留言还在   
            localStorage.setItem("k_showCon", $("#showCon").html());   
        }   
        function ClearClick()   
        {   
            //6.获取到显示p里面的内容清除   
            $("#showCon").html("");   
            localStorage.clear();   
        }   
    </script>
</head>
<body>
    <p>
        <table>
            <tr>
                <td colspan="2">
                    <textarea id="mCon" cols="25" rows="10"></textarea>
                </td>
            </tr>
            <tr>
                <td><input type="button" value="留言" onclick="preservationClick()" /></td>
                <td><input type="button" value="清除" onclick="ClearClick()" /></td>
            </tr>
        </table>
        <p id="showCon"></p>
    </p>
</body>
</html>

로그인 후 복사

效果显示:

웹스토리지 상세 소개 [html5의 로컬 데이터 처리]