web離線應用

過青年發表於2020-07-16
Web

離線應用

1.0 離線應用說明

​ 支援離線Web應用是一個重點，離線就是在裝置沒有網路的情況下依然可以執行的運用；前端開發人員一直希望Web應用可以和傳統客戶端應用(pc端)同場競技，PC端應用一個很重要的特點就是在沒有網的情況下也能正常使用，所以前端應用也要做到這一點；

1.1 離線檢測

​ 如果要開發離線應用，首先應該知道裝置是否處於離線狀態下，JavaScript中的navigator.onLine屬性儲存了這個狀態，離線還是聯網；如果返回true則聯網，否則離線；

if(navigator.onLine){
    // 進入這裡說明為 true，聯網中
    alert('聯網中');
}else{
    // 進入這裡說明false，離線中
    alert('離線中');
}

​ 這還不夠，我們還得監視網路狀態改變，如果突然從聯網狀態變成了離線狀態，離線應用就要開始執行使用，所以我們還要監視網路狀態，使用window全域性物件上的addEventListener方法；online是聯網，offline是離線

window.addEventListener('online',function(){
    // 當從  離線變成聯網這個瞬間，觸發該函式
    alert("網路重新連線了！！");
});

window.addEventListener('offline',function(){
    // 當從  聯網變成離線這個瞬間，觸發該函式
    alert("網路斷開了。。。");
});

1.2 資料儲存

這裡只介紹一種簡單的資料儲存方式，localStorage

1.21 localStorage
  • localStorage把資料儲存在本地裡，所以不會過期，除非人為刪除才會消失
  • 大小為5M
  • 只能儲存字串

localStorage儲存資料就是儲存在localStorage物件上，作為物件的資料一直儲存下來；

所以可以使用以下方式儲存、讀取資料

// local.js
// 儲存資料
localStorage.name = '過青年';
localStorage.age = 20;
// 讀取資料
console.log(localStorage.name);
console.log(localStorage.age);

當然，官方定義了正規的方法用於儲存、讀取、刪除等

//local2.js
localStorage.setItem(name,'過青年');//儲存
//localStorage.getItem("name");//讀取
//localStorage.removeItem("name"); 刪除

使用html引入，執行；執行後F12開啟開發者工具-->儲存-->本地儲存，可以看到資料已經儲存；現在我們可以把儲存資料的語句刪掉，繼續在瀏覽器開啟，檢視本地儲存，資料依然在那裡，沒有消失，除非我們使用removeItem()或者delete刪掉這個屬性，否則不會消失；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用local storage</title>
</head>
<body>
    <script src="./local2.js"></script>
</body>
</html>

相關文章