H5 웹 스토리지

1913 단어
클라이언트가 데이터를 저장합니다. 1.두 가지 방식: a.local Storage - 시간 제한이 없는 데이터 저장 b.session Storage - 하나의session에 대한 데이터 저장에 시간 제한이 있고 브라우저가 닫힙니다
2. 쿠키와 비교: 이전에는 모두 쿠키 저장소였지만 쿠키는 대량의 데이터 저장소에 적합하지 않다. 그들은 모든 서버에 대한 요청으로 전달되기 때문에 쿠키 속도가 느리고 효율이 높지 않다.
localStorage
.html 파일



    
    
    <script src="localStorage.js"/>


    <textarea style="width: 200px; height: 200px;" id="ta"/>
    <button id="btn">save</button>


</code></pre> 
 <p>localStorage.js  </p> 
 <pre><code>var ta;
var btn;
window.onload = function(){
    ta = document.getElementById("ta");
    if(localStorage.text){
        ta.value = localStorage.text;
    }

    btn = document.getElementById("btn");
    btn.onclick = function(){
        //alert(ta.value);
        localStorage.text = ta.value;
    }

}
</code></pre> 
 <h3>sessionStorage</h3> 
 <p>.html  </p> 
 <pre><code>


    <meta charset="UTF-8"/>
    <title/>
    <script src="sessionStorage.js"/>


    <span id="txt">0</span>
    <button id="addbtn">Add</button>


</code></pre> 
 <p>sessionStorage.js  </p> 
 <pre><code>var num = 0;
var txt;
var btn;
window.onload = function(){
    txt = document.getElementById("txt");
    btn = document.getElementById("addbtn");
    if(sessionStorage.num){
        num = sessionStorage.num;
    }else{
        num = 0;
    }

    btn.onclick = function(){
        num++;
        sessionStorage.num = num;
        showNum();
    }
}

function showNum(){
    txt.innerHTML = num;
}
</code></pre> 
</article>
                            </div>
                        </div>

좋은 웹페이지 즐겨찾기