亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

【js】前端持久化存儲(chǔ)

Steve_Wang_ / 3533人閱讀

摘要：與服務(wù)器端通信每次都會(huì)攜帶在頭中，如果使用保存過多數(shù)據(jù)會(huì)帶來性能問題。但如果要存儲(chǔ)大量的復(fù)雜的數(shù)據(jù)，這并不是一種很好的方案。使用索引存儲(chǔ)數(shù)據(jù)，各種數(shù)據(jù)庫操作放在事務(wù)中執(zhí)行。通過監(jiān)聽正確類型的事件以等待操作完成。

cookie

生命期為只在設(shè)置的cookie過期時(shí)間之前一直有效，即使窗口或?yàn)g覽器關(guān)閉。 存放數(shù)據(jù)大小為4K左右 。有個(gè)數(shù)限制（各瀏覽器不同），一般不能超過20個(gè)。與服務(wù)器端通信：每次都會(huì)攜帶在HTTP頭中，如果使用cookie保存過多數(shù)據(jù)會(huì)帶來性能問題。
http://www.runoob.com/js/js-c...

localStorage

localStorage生命周期是永久，這意味著除非用戶顯示在瀏覽器提供的UI上清除localStorage信息，否則這些信息將永遠(yuǎn)存在。存放數(shù)據(jù)大小為一般為5MB,而且它僅在客戶端（即瀏覽器）中保存，不參與和服務(wù)器的通信。

sessionStorage

為每一個(gè)數(shù)據(jù)源維持一個(gè)存儲(chǔ)區(qū)域，在瀏覽器打開期間存在，包括頁面重新加載

api

sessionStorage 和 localStorage 的用法基本一致，引用類型的值要轉(zhuǎn)換成JSON

保存數(shù)據(jù)到本地 
const info = {
        name: "Lee",
        age: 20,
        id: "001"
    };
    sessionStorage.setItem("key", JSON.stringify(info));
    localStorage.setItem("key", JSON.stringify(info));
從本地存儲(chǔ)獲取數(shù)據(jù) 
var data1 = JSON.parse(sessionStorage.getItem("key"));
var data2 = JSON.parse(localStorage.getItem("key"));
本地存儲(chǔ)中刪除某個(gè)保存的數(shù)據(jù) 
sessionStorage.removeItem("key");
localStorage.removeItem("key");
刪除所有保存的數(shù)據(jù) 
sessionStorage.clear();
localStorage.clear();
監(jiān)聽本地存儲(chǔ)的變化 
window.addEventListener("storage", function (e) {
        console.log("key", e.key);
        console.log("oldValue", e.oldValue);
        console.log("newValue", e.newValue);
        console.log("url", e.url);
    })
indexedDB

在使用一個(gè)技術(shù)之前，先搞清楚它是什么，這對(duì)你的理解很重要，從DB就可以看出，它肯定是一個(gè)數(shù)據(jù)庫，而說到數(shù)據(jù)庫，有兩種不同類型的數(shù)據(jù)庫，就是關(guān)系型數(shù)據(jù)庫和非關(guān)系型數(shù)據(jù)庫，關(guān)系型數(shù)據(jù)庫如Mysql、Oracle等將數(shù)據(jù)存儲(chǔ)在表中，而非關(guān)系型數(shù)據(jù)庫如Redis、MongoDB等將數(shù)據(jù)集作為個(gè)體對(duì)象存儲(chǔ)。indexedDB就是一個(gè)非關(guān)系型數(shù)據(jù)庫，它不需要你去寫一些特定的sql語句來對(duì)數(shù)據(jù)庫進(jìn)行操作，因?yàn)樗莕osql的，數(shù)據(jù)形式使用的是json，

意義

也許熟悉前端存儲(chǔ)的會(huì)說，不是有了LocalStorage和Cookies嗎？為什么還要推出indexedDB呢？其實(shí)對(duì)于在瀏覽器里存儲(chǔ)數(shù)據(jù)，你可以使用cookies或local storage，但它們都是比較簡(jiǎn)單的技術(shù)，而IndexedDB提供了類似數(shù)據(jù)庫風(fēng)格的數(shù)據(jù)存儲(chǔ)和使用方式。

首先說說Cookies，英文直接翻譯過來就是小甜點(diǎn)，聽起來很好吃，實(shí)際上并不是，每次HTTP接受和發(fā)送都會(huì)傳遞Cookies數(shù)據(jù)，它會(huì)占用額外的流量。例如，如果你有一個(gè)10KB的Cookies數(shù)據(jù)，發(fā)送10次請(qǐng)求，那么，總計(jì)就會(huì)有100KB的數(shù)據(jù)在網(wǎng)絡(luò)上傳輸。Cookies只能是字符串。瀏覽器里存儲(chǔ)Cookies的空間有限，很多用戶禁止瀏覽器使用Cookies。所以，Cookies只能用來存儲(chǔ)小量的非關(guān)鍵的數(shù)據(jù)。

其次說說LocalStorage，LocalStorage是用key-value鍵值模式存儲(chǔ)數(shù)據(jù)，但跟IndexedDB不一樣的是，它的數(shù)據(jù)并不是按對(duì)象形式存儲(chǔ)。它存儲(chǔ)的數(shù)據(jù)都是字符串形式。如果你想讓LocalStorage存儲(chǔ)對(duì)象，你需要借助JSON.stringify()能將對(duì)象變成字符串形式，再用JSON.parse()將字符串還原成對(duì)象。但如果要存儲(chǔ)大量的復(fù)雜的數(shù)據(jù)，這并不是一種很好的方案。畢竟，localstorage就是專門為小數(shù)量數(shù)據(jù)設(shè)計(jì)的，所以它的api設(shè)計(jì)為同步的。而IndexedDB很適合存儲(chǔ)大量數(shù)據(jù)，它的API是異步調(diào)用的。IndexedDB使用索引存儲(chǔ)數(shù)據(jù)，各種數(shù)據(jù)庫操作放在事務(wù)中執(zhí)行。IndexedDB甚至還支持簡(jiǎn)單的數(shù)據(jù)類型。IndexedDB比localstorage強(qiáng)大得多，但它的API也相對(duì)復(fù)雜。對(duì)于簡(jiǎn)單的數(shù)據(jù)，你應(yīng)該繼續(xù)使用localstorage，但當(dāng)你希望存儲(chǔ)大量數(shù)據(jù)時(shí)，IndexedDB會(huì)明顯的更適合，IndexedDB能提供你更為復(fù)雜的查詢數(shù)據(jù)的方式。

indexedDB的特性

1.對(duì)象倉庫
2.事務(wù)性
3.基于請(qǐng)求
4.異步

使用

打開數(shù)據(jù)庫并且開始一個(gè)事務(wù)。

創(chuàng)建一個(gè) object store。

構(gòu)建一個(gè)請(qǐng)求來執(zhí)行一些數(shù)據(jù)庫操作，像增加或提取數(shù)據(jù)等。

通過監(jiān)聽正確類型的 DOM 事件以等待操作完成。

在操作結(jié)果上進(jìn)行一些操作（可以在 request 對(duì)象中找到）

https://www.cnblogs.com/dengy...
https://segmentfault.com/a/11...

HTML5 Web SQL

HTML5已經(jīng)會(huì)放棄Web SQL Database

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/95920.html

相關(guān)文章

  • 前端數(shù)據(jù)扁平化與持久化

    摘要：與持久化工程師花了年時(shí)間打造，與同期出現(xiàn)。有持久化數(shù)據(jù)結(jié)構(gòu)，如等，并發(fā)安全?？偨Y(jié)篇幅有限，時(shí)間也比較晚了，關(guān)于前端數(shù)據(jù)的扁平化與持久化處理先講這么多了，有興趣的同學(xué)可以關(guān)注下，后面有時(shí)間會(huì)多整理分享。 (PS: 時(shí)間就像海綿里的水，擠到?jīng)]法擠，只能擠擠睡眠時(shí)間了~ 知識(shí)點(diǎn)還是需要整理的，付出總會(huì)有收獲，tired but fulfilled~) 前言 最近業(yè)務(wù)開發(fā)，從零搭建網(wǎng)頁生成器，...

    dreamtecher 評(píng)論0 收藏0

  • 使用 NodeJs 實(shí)現(xiàn)一個(gè)本地接口數(shù)據(jù)系統(tǒng)，無需數(shù)據(jù)庫，讓前端獨(dú)立于后臺(tái)開發(fā)

    摘要：使用方法介紹下載源碼，并執(zhí)行安裝啟動(dòng)服務(wù)，。如圖，我們創(chuàng)建一個(gè)接口可以實(shí)時(shí)預(yù)覽格式化的數(shù)據(jù)和提示錯(cuò)誤。 使用 NodeJs 實(shí)現(xiàn)本地接口系統(tǒng)，解決前后臺(tái)開發(fā)最后一公里 無數(shù)據(jù)庫的情況下，實(shí)現(xiàn)數(shù)據(jù)持久化，通過api url返回json 數(shù)據(jù)，提高前端開發(fā)效率！項(xiàng)目地址 ：local-ajax-pai 實(shí)現(xiàn)功能 完整的操作頁面 首頁展示所有保存的接口列表 創(chuàng)建的接口保存到本地 支持重...

    JeOam 評(píng)論0 收藏0

  • 一文帶你看懂cookie，面試前端不用愁

    摘要：的屬性在瀏覽器的控制臺(tái)中，可以直接輸入來查看。可以在瀏覽器的控制臺(tái)中看出哪些是類型的，下帶綠色對(duì)勾的即是，如圖只要是類型的在控制臺(tái)通過是獲取不到的，也不能進(jìn)行修改。當(dāng)會(huì)話過期或被放棄后，服務(wù)器將終止該會(huì)話。在中，用取代了。 本文由云+社區(qū)發(fā)表 在前端面試中，有一個(gè)必問的問題：請(qǐng)你談?wù)刢ookie和localStorage有什么區(qū)別啊？ localStorage是H5中的一種瀏覽器本地存...

    notebin 評(píng)論0 收藏0

  • 關(guān)于前端設(shè)置過期時(shí)間

    摘要：前言開發(fā)過程少不了會(huì)遇到給某個(gè)狀態(tài)設(shè)置過期時(shí)間的需求例如進(jìn)入頁面有個(gè)默認(rèn)彈窗用戶關(guān)閉之后在小時(shí)之內(nèi)再次打開不能再彈面對(duì)這樣需求我們首先想到的是需要設(shè)置一個(gè)變量去控制彈窗的隱藏因?yàn)槟J(rèn)是開啟的如何去保證這個(gè)變量的有效時(shí)間呢這里就涉及到數(shù)據(jù)的持 前言 開發(fā)過程少不了會(huì)遇到給某個(gè)狀態(tài)設(shè)置過期時(shí)間的需求,例如:進(jìn)入頁面有個(gè)默認(rèn)彈窗,用戶關(guān)閉之后在 1 小時(shí)之內(nèi)再次打開不能再彈; 面對(duì)這樣需求我...

    UnixAgain 評(píng)論0 收藏0

  • 前端20個(gè)靈魂拷問 徹底搞明白你就是中級(jí)前端工程師 【下篇】

    摘要：安裝后已經(jīng)完成了安裝，并且等待其他的線程被關(guān)閉。激活后在這個(gè)狀態(tài)會(huì)處理事件回調(diào)提供了更新緩存策略的機(jī)會(huì)。并可以處理功能性的事件請(qǐng)求后臺(tái)同步推送。廢棄狀態(tài)這個(gè)狀態(tài)表示一個(gè)的生命周期結(jié)束。 showImg(https://segmentfault.com/img/bVbwWJu?w=2056&h=1536); 不知不覺，已經(jīng)來到了最后的下篇 其實(shí)我寫的東西你如果認(rèn)真去看，跟著去寫，應(yīng)該能有...

    fireflow 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<