web客戶端存儲技術(shù)筆記

GeekQiaQia 發(fā)布于2019-08-21 16:24 / 3211人閱讀

摘要：客戶端存儲的相關(guān)技術(shù)有鍵值對存儲，綁定到某個域，并存儲瀏覽器會話數(shù)據(jù)鍵值對存儲，綁定到某個域，會話結(jié)束時會刪除由一個瀏覽器內(nèi)建的對象存儲器，來存儲跨會話數(shù)據(jù)一個完整的關(guān)系型數(shù)據(jù)庫，可以作為的替代方案通過聲明文件，來讓客戶端存儲離線文件。

客戶端存儲的相關(guān)技術(shù)有

localStorage 鍵-值對存儲，綁定到某個域，并存儲瀏覽器會話數(shù)據(jù)；

sessionStorage 鍵-值對存儲，綁定到某個域，會話結(jié)束時會刪除；

IndexedDB 由一個瀏覽器內(nèi)建的對象存儲器，來存儲跨會話數(shù)據(jù)；

WebSQLDatabases 一個完整的關(guān)系型數(shù)據(jù)庫，可以作為IndexedDB的替代方案；

menifest 通過聲明menifest文件，來讓客戶端存儲離線文件。

localStorage的用法示例

保存
localStorage.setItem(“background_color”,$(“#background_color”).val())

獲取
var bgcolor = localStorage.getItem(“background_color”)

模擬使用場景
設置用戶個性化樣式，通過表單選擇CSS值后，將其發(fā)送給服務器的同時設置localStorage。在頁面加載的時候，將localStorage的值取出，將樣式通過DOM操作應用到界面上。

sessionStorage的用法示例

會話結(jié)束時刪除數(shù)據(jù)，則可以采用這種方法。

保存
sessionStorage.setItem(‘name’,’Brian Hogan’)

取出
var name = sessionStorage.getItem(‘name’)

IndexedDB用法

操作和數(shù)據(jù)庫類似，它的主要特點是請求后由事件異步執(zhí)行。首先和相應數(shù)據(jù)庫發(fā)送連接請求，請求成功后執(zhí)行增刪改查等操作。
《HTML5和CSS3實例教程》上內(nèi)容較老，具體參考火狐開發(fā)者文檔：
https://developer.mozilla.org...

離線應用的實現(xiàn)

創(chuàng)建一個manifest文件，里面包含web 應用客戶端文件（HTML、CSS、JS文件），當用戶第一次訪問HTML主頁時，menifest所標注的所有文件都會下載到客戶端。
manifest文件必須通過 text/cache-manifest 的MiME類型來提供給用戶。

GPU云服務器云服務器筆記本云存儲 web爬蟲技術(shù) web前端技術(shù) java web 技術(shù)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/88509.html

相關(guān)文章

云計算技術(shù)將如何影響商業(yè)世界？

摘要：云計算技術(shù)如何運作云計算如今并不是什么新鮮事物。云計算技術(shù)和自動化協(xié)同工作，簡化服務臺，這樣可以縮短故障響應時間，并改善整體客戶體驗。云計算技術(shù)的進步使企業(yè)能夠從全球各地招聘人才。云計算技術(shù)已經(jīng)滲透到人們生活的各個方面，其中包括個人喜好和專業(yè)工作。例如，很多音樂和電視節(jié)目都可以在云端存儲和訪問。從待辦事項列表到隨機筆記，手機的所有內(nèi)容都可以在云平臺中備份和訪問。它改變了人們的工作方式，也改變...

linkFly 2019-04-29 15:39 評論0 收藏0
token與sessionId的區(qū)別——學習筆記

摘要：學開發(fā)半年多，之前一直有個疑問為什么要用，好好的用不好嗎其實就是新技術(shù)與老技術(shù)，但是還是想弄懂這個問題之前一直疑惑，今天搞懂了，整合了一下學習過程，先對比一下與一簡述的生成方式與的生成方式的生成方式瀏覽器第一次訪問服務器時，服務器創(chuàng)建一個，學開發(fā)半年多，之前一直有個疑問：為什么要用token，好好的用sessionID不好嗎（其實就是新技術(shù)與老技術(shù)，但是還是想弄懂）這個問題之前一直疑...

liaosilzu2007 2019-08-06 13:35 評論0 收藏0
《JavaScript Web富應用開發(fā)》讀書筆記

摘要：創(chuàng)建類中并沒有真正的類，但中有構(gòu)造函數(shù)和運算符。任何函數(shù)都可以用作構(gòu)造函數(shù)，構(gòu)造函數(shù)必須使用運算符作為前綴來創(chuàng)建新的實例。調(diào)用構(gòu)造函數(shù)時不要丟掉關(guān)鍵字。這里使用基于原型的繼承，而沒有用到構(gòu)造函數(shù)和關(guān)鍵字。 1.創(chuàng)建類 JavaScript中并沒有真正的類，但JavaScript中有構(gòu)造函數(shù)和new運算符。構(gòu)造函數(shù)用來給實例對象初始化屬性和值。任何JavaScript函數(shù)都可以用作構(gòu)造函...

?。?。 2019-08-19 18:46 評論0 收藏0
前端補集 - 收藏集 - 掘金

摘要：原文地址一個非常適合入門學習的博客項目前端掘金一個非常適合入門學習的項目，代碼清晰結(jié)構(gòu)合理新聞前端掘金介紹一個由編寫的新聞。深入淺出讀書筆記知乎專欄前端專欄前端掘金去年的一篇老文章，恰好今天專欄開通，遷移過來。破解前端面試（80% 應聘者不及格系列）：從閉包說起 - 掘金修訂說明：發(fā)布《80% 應聘者都不及格的 JS 面試題》之后，全網(wǎng)閱讀量超過 6W，在知乎、掘金、cnodejs ...

YorkChen 2019-08-29 12:41 評論0 收藏0
前端補集 - 收藏集 - 掘金

摘要：原文地址一個非常適合入門學習的博客項目前端掘金一個非常適合入門學習的項目，代碼清晰結(jié)構(gòu)合理新聞前端掘金介紹一個由編寫的新聞。深入淺出讀書筆記知乎專欄前端專欄前端掘金去年的一篇老文章，恰好今天專欄開通，遷移過來。破解前端面試（80% 應聘者不及格系列）：從閉包說起 - 掘金修訂說明：發(fā)布《80% 應聘者都不及格的 JS 面試題》之后，全網(wǎng)閱讀量超過 6W，在知乎、掘金、cnodejs ...

AbnerMing 2019-08-20 16:57 評論0 收藏0