Webストレージ

5898 ワード

クライアントがデータを格納する新しい方法
2つの方法LocalStorage時間制限のないデータストレージSessionStorageは、1つのセッションのデータストレージに対して
クッキーと比較すると、これまではクッキーで完成していました.しかし、クッキーは大量のデータのストレージに適していません.サーバごとの要求によって伝達されるため、速度が遅く、効率も高くありません.
二localStorageメソッド
ストレージの特徴LocalStorageメソッドストレージのデータには時間制限はありません
≪インスタンス|Instance|emdw≫
Html部

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>title>
    <script src="localStorage.js">script>
head>
<body>
    <textarea id="ta" rows="5" cols="100">textarea>
    <button id="btn">savebutton>
body>
html>

Js部
var ta,btn;

window.onload=function(){
    ta=document.getElementById("ta");
    btn=document.getElementById("btn");
    if(localStorage.text){
        ta.value=localStorage.text;
    }
    btn.onclick=function(){
        localStorage.text=ta.value;
    }
}

3 sessionStorageメソッド
ストレージフィーチャーsessionStorageメソッドは、1つのsessionに対してデータストレージを行います.ユーザーがブラウザウィンドウを閉じると、データは削除されます.
カウントインスタンス
htmlセクション

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>title>
    <script src="sessionStorage.js">script>
head>
<body>
    <span id="txt">0span>
    <button id="addBtn">Addbutton>
body>
html>

Js部
var txt,addBtn;
var num=0;

window.οnlοad=function(){
    txt=document.getElementById("txt");
    addBtn=document.getElementById("addBtn");
    if(sessionStorage.num){
        num=sessionStorage.num;
    }else{
        num=0;
    }
    addBtn.οnclick=function(){
        num++;
        sessionStorage.num=num;
        showNum();
    }
}

function showNum(){
    txt.innerHTML=num;
}