H5 の LocalStorage がリフレッシュ値をローカルに保存する方法-H5 チュートリアル-php.cn

H5 の LocalStorage がリフレッシュ値をローカルに保存する方法

php中世界最好的语言

リリース： 2018-03-26 14:37:57

オリジナル

3172 人が閲覧しました

今回は、H5 の LocalStorage がリフレッシュ値をローカルに保存する方法について説明します。H5 の LocalStorage がリフレッシュ値をローカルに保存する場合の注意事項について説明します。実際のケースを見てみましょう。

H5 の 2 つのストレージテクノロジーの最大の違いは、ライフサイクルです。

1. localStorage はローカルストレージであり、保存期間は制限されていません。

2. sessionStorage セッションストレージは、ページを閉じると失われます。

使用法: localStorage.setItem("key", "value")//ストレージ

localStorage.getItem(key)//keyで値を取得

localStorage.valueOf()/ /すべての値を取得します

localStorage.removeItem("key")//単一の値を削除します。引用符に注意してください

localStorage.clear()//すべてのデータを削除します

localStorage.length//データの数を取得します

localStorage.key (N)//N 番目のデータのキー値を取得します

注: localStorage と sessionStorage は上記と同じで、使用方法も同じです

よく使われる要約:localStorage .key = 1;//ストレージ、名前付きキーを設定し、値は 1 です

localStorage.removeItem("key");//ストレージキーを削除します。キーに引用符を忘れずに追加してください

以下は実践的な例ですテスト用:

入力テキストコンテンツのローカルストレージを実現し、ブラウザを閉じて再度開いた後も、以前に入力したコンテンツがまだ存在するようにします (モバイル DingTalk ログの退出リクエストなどのフィールドでよく見られます)。

まず、ページ上にテキストエリアを作成します。以下は jQuery です:

if(!localStorage.getItem("text"))　　//window对象的话，前面的window省略了哦
    localStorage.setItem("text","");　　//这里先判断一下，做空白存储，否则返回 NULL 显示出来体验不好，这里的if大括号省去了
    localStorage.text = localStorage.getItem("text");　　//取值
    $("textarea").html(localStorage.text);　　//显示
    $("textarea").keyup(function(){　　//这里有很多，比如blur, change, keydown, 还有做个定时器也行，实用于多字段存储
        localStorage.setItem("text",$(this).val());　　//重新存储
    });

ログイン後にコピー

上記は、H5 ローカルストレージが依然として非常に便利であることを示しています。もちろん、フィールドが多い場合は、使用できる JSON メソッドが提供されています。インターネットからダウンロードした以下を参照してください

<script type="text/javascript">
    if(window.sessionStorage){
        alert('ok');
    }else{
        alert('fail');
    }
    // 设置值
    sessionStorage.setItem('key_a', 1);
    // 取值
    var key_a = sessionStorage.getItem('key_a');
    console.log(key_a);
    // 删除
    sessionStorage.removeItem('key_a');
    console.log(sessionStorage.getItem('key_a'));// null
    sessionStorage.setItem('key_b', 1);
    sessionStorage.setItem('key_c', 2);
    // 清除所有键值
    sessionStorage.clear();
    console.log(sessionStorage.key_b);
    console.log(sessionStorage.key_c);
    console.log('==================');
    // 设置值和取值也可以使用.符号，类似于取对象属性
    // 设置值
    sessionStorage.key_d = 12;
    // 取值
    var key_d = sessionStorage.key_d;
    console.log(key_d);
    // 有个小区别，如果这个key没有了。一个返回值undefined，一个是null
    console.log(sessionStorage.key_null);// undefined
    console.log(sessionStorage.getItem('key_null'));// null
    console.log('==========简单演示一个存放对象的例子========');
    var obj = {
        a : 12,
        b : [1,2,3,4,5],
        c : {
            x : 'a',
            y : ['bb', 12, 'cc', {a:1,b:2}],
            z : 1333
        }
    };
    sessionStorage.setItem('page', JSON.stringify(obj));
    // 取值
    var page = JSON.parse(sessionStorage.getItem('page'));
    console.log(page);
    // 遍历下数组
    for(var i=0;i< page.b.length;i++){
        console.log(page.b[i]);
    }
    // 遍历对象，通常用in
    for(var j in page.c){
        console.log(page.c[j])
    }
    // 删除key
    sessionStorage.removeItem(&#39;page&#39;);
</script>

ログイン後にコピー

例: カウンタ、ページを更新すると、効果がわかります:

<p id="test"></p>
<script>
var storage = window.localStorage;
if (!storage.getItem("pageLoadCount"))
storage.setItem("pageLoadCount",0);
storage.pageLoadCount = parseInt(storage.getItem("pageLoadCount")) + 1;//必须格式转换
document.getElementById("test").innerHTML = storage.pageLoadCount;
//showStorage();
</script>

ログイン後にコピー

HTML5 ローカルストレージには

文字列

のみを保存できることに注意してください。文字に自動的に変換されます。任意の形式の String で格納されるため、読み取り時に自分で型変換を実行する必要があります。これが、前のコードで parseInt を使用する必要がある理由です。この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

H5の保存方法を詳しく解説

zeptoはモバイル側でシームレスな上下スクロールを可能にします

以上がH5 の LocalStorage がリフレッシュ値をローカルに保存する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。