本地儲存webstorage-如何監測本地資料是否改變

阿新 • • 發佈：2019-01-15

在H5中，window物件裡面有一個storage事件，我們可以進行監聽或者指定其事件處理函式的方法，在其他頁面修改了sessionstorage或者localstorage中的值時，要做的處理。

我們先看一下一下幾個屬性：

1、event.key:這個是被修改的資料鍵值

2、event.oldValue : 被修改前的值

3、enent.newValue:被修改後的值

4、event.url:修改storage 頁面的url地址

5、event.storageArea : 被變動的 sessionstorage或者localstorage物件。

接下來我們通過兩個例子來體驗一下：

一、輸出變動情況，如果該值被修改，則立刻輸出變動前，變動後，以及修改該值得頁面url。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>監測webstorage資料</title>
</head>
<body>
<script>
    window.addEventListener('storage',function (event) {
        if(event.key=='demo'){
            var output=document.getElementById("output");
            output.innerHTML="修改前的值："+event.oldValue;
            output.innerHTML+="<br>修改後的新值："+event.newValue;
            output.innerHTML+="<br>變動後的地址"+utf8_decode(unescape(event.url));
        }
    },false);
    function utf8_decode(utftext) {
        var string="";
        var i=0;
        var c=c1=c2=0;
        while (i<utftext.length){
            c=utftext.charCodeAt(i); //charCodeAt() 方法可返回指定位置的字元的 Unicode 編碼。這個返回值是 0 - 65535 之間的整數。
            if(c<128){
                string+=String.fromCharCode(c); //fromCharCode() 可接受一個指定的 Unicode 值，然後返回一個字串
                i++;
            }
            else if (c>191 && c<224){
                c2=utftext.charCodeAt(i+1);
                string+=String.fromCharCode(((c & 31) << 6) | (c2 & 63));
                i=i+2;

            }else {
                c2=utftext.charCodeAt(i+1);
                c3=utftext.charCodeAt(i+2);
                string+=String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
                i+=3;
            }
        }
        return string;
    }
</script>

<output id="output"></output>
</body>
</html>

在這個頁面來對webstorage進行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改web中的資料</title>
</head>
<body>
<script>
    function setLocalStorage() {
        localStorage.demo=document.getElementById("mytext").value;

    }
</script>
    請輸入修改的值：<input type="text" id="mytext"> <br>
    <button onclick="setLocalStorage()">
         修改
    </button>
</body>
</html>

這樣就能夠得到原始資料，修改後的資料，以及哪個頁面修改的資料。

本地儲存webstorage-如何監測本地資料是否改變

在H5中，window物件裡面有一個storage事件，我們可以進行監聽或者指定其事件處理函式的方法，在其他頁面修改了sessionstorage或者localstorage中的值時，要做的處理。我

本地儲存動態請求的資料

儲存的時候要在wx.request中儲存； data: { useInfo: [] }, var that = this; wx.request

HTML 5 中WebStorage實現資料本地儲存

webstorage 分sessionStorage和localstorage，sessionStorage是臨時儲存，localStorage是永久儲存。 sessionStorage如果瀏覽器關閉了，資料就沒有了，而localStorage則不會。 sessionSto

egret 本地儲存資料

通過 egret.localStorage.setItem(key,value); 可以實現本地儲存資料，類似於cookie 儲存 let key:string = "data_name"; let value:string = "data_value"; egret.

Hive-0.13.1本地獨立模式安裝元資料儲存到MariaDB-10.1.0 Hadoop-2.4.0

tar -zxvf apache-hive-0.13.1-bin.tar.gz 解壓後,編輯java.sh(java.sh為自己建立的指令碼): vim /etc/profile.d/java.sh export HIVE_HOME=/opt/modules/hive/apache-hive-0.13.1

微信小程式簡單的form表單本地儲存資料

效果圖：主要利用小程式的getStorage來實現非同步本地儲存。小程式目錄結構如下：新建專案前，為了簡化操作可直接右鍵新建目錄，這樣建出來的檔案會直接寫在app.json中，無需手動新增。login.

CocosCreator之KUOKUO帶你做主角資料本地儲存加拖尾加攝像機緩跟隨加無限地面-四合一教程

本次引擎2.0.5 編輯工具VSCode 目標1：本地儲存新建個工程，加個單色背景，加個標籤，加兩個按鈕（文字為‘升級’和‘儲存’）：好了，讓我們新建個指令碼綁在Canvas上 main.js 在載入時獲取資料，如果沒有，給初始值。給兩個按鈕寫方法：

C#資料本地儲存方案之SQLite

即使是做網路應用，在斷線情況下，也需要考慮資料的本地儲存。在SQLite出現之前，資料量大的情況下，我們一直使用ACCESS，資料量小，則檔案儲存。ACCESS不支援事務原子性，在斷電情況下（這種情況總是會發生）會導致資料很難恢復。一：安裝 SQLITE，是一

C# SQLite資料本地儲存方案

即使是做網路應用，在斷線情況下，也需要考慮資料的本地儲存。在SQLite出現之前，資料量大的情況下，我們一直使用ACCESS，資料量小，則檔案儲存。ACCESS不支援事務原子性，在斷電情況下（這種情況總是會發生）會導致資料很難恢復。powered by 25175.net

js中實現資料的本地儲存和呼叫

我這裡用一個遊戲中的分數為例： 1.全域性中設定一個物件Container來儲存資料 var Container = {}; 2.在物件中寫兩個介面儲存資料和呼叫資料 var Container = { SetScore:fu

Android開發過程中將APP的資料寫入本地儲存的方法

在Android開發過程中，我們經常會遇到本地資料儲存的過程。因此，在這種情況下，我們需要通過流的形式，將資料寫入到儲存中。具體如下：package com.example.ble; import

【NodeJS開發日記（7）】——JS本地儲存資料的幾種方法

【轉自https://blog.csdn.net/darrenzzb66/article/details/73012577】1.Cookie 這個恐怕是最常見也是用得最多的技術了，也是比較古老的技術了。COOKIE優點很多，使用起來很方便但它的缺點也很多：比如跨域訪問問題

HTML5本地儲存之WebStorage篇

Web Storage是HTML5引入的一個非常重要的功能，在前端開發中經常用到，可以在客戶端本地儲存資料，類似HTML4的cookie，但可實現功能要比cookie強大的多，cookie大小被限制在4KB，Web Storage官方建議為每個網站5MB。Web Storag

使用本地儲存localStorage儲存資料的todoList

ToDoList 幫你把要做的事情列出來，一項一項，類似思維導圖。最明顯的好處是強迫自己整理出任務的每個部分，理順後按部就班的完成，提高效率。現在,我們來使用js來做一個todolist 基本功能開始的構思是用一個input來輸入要做的事情,按鈕確

JS本地儲存資料的幾種方法

1.Cookie 這個恐怕是最常見也是用得最多的技術了，也是比較古老的技術了。COOKIE優點很多，使用起來很方便但它的缺點也很多：比如跨域訪問問題；無法儲存太大的資料（最大僅為4KB）；本地儲存的資料會發送給伺服器，浪費頻寬等等；程式碼如下

H5本地儲存Web Storage

規範我們輔助 ice fun android 取出其中 .get 一、本地存儲由來的背景　　由於HTML4時代Cookie的大小、格式、存儲數據格式等限制，網站應用如果想在瀏覽器端存儲用戶的部分信息，那麽只能借助於Cookie。但是Cookie的這些限制，也就導致了

本地儲存(localStorage)記錄

本地 ora value gif locals search getitem -- 返回 - 本地存儲 + localStorage.getItem("search_history") 獲取本地存儲 + localStorage.setItem("a","100") 設置

Direct3D11 儲存Texture2D到本地檔案

#include <D3Dx11tex.h> #include <d3d11_1.h> #pragma comment(lib, "D3DX11.lib") #pragma comment(lib, "d3d11.lib") #pragma comment(li

localStroage本地儲存

<!DOCTYPE html> <html> <head> <title>本地儲存</title> </head> <body> <p

Android 本地儲存之外部儲存/內部儲存路徑獲取大全

//:/system String rootDir = Environment.getRootDirectory().toString(); System.out.println("Environment.getRootDirectory()=:" +

本地儲存webstorage-如何監測本地資料是否改變

相關推薦