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

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

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

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

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

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

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

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

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

localStorage的用法示例

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

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

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

sessionStorage的用法示例

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

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

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

IndexedDB用法

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

離線應(yīng)用的實(shí)現(xiàn)

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

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

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

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

相關(guān)文章

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

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

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

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

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

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

琛ｈ。 2019-08-19 18:46 評論0 收藏0
前端補(bǔ)集 - 收藏集 - 掘金

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

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

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

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