IndexedDB

Rocture 發(fā)布于2019-08-26 12:22 / 2722人閱讀

摘要：初體驗(yàn)特點(diǎn)對(duì)象形式存儲(chǔ)異步防止鎖死瀏覽器，是同步的支持事物只要有一步失敗，整個(gè)事物回滾同源限制不能跨域訪問(wèn)數(shù)據(jù)庫(kù)存儲(chǔ)空間比大大的多支持二進(jìn)制存儲(chǔ)我寫了一個(gè)通訊錄的項(xiàng)目，利用在瀏覽器持續(xù)化端存儲(chǔ)通訊錄數(shù)據(jù)學(xué)習(xí)自阮一峰瀏覽器數(shù)據(jù)庫(kù)我貼出大概示例

IndexedDB初體驗(yàn) 特點(diǎn)：

對(duì)象形式存儲(chǔ)

異步（防止鎖死瀏覽器，localstorage是同步的

支持事物（只要有一步失敗，整個(gè)事物回滾

同源限制 (不能跨域訪問(wèn)數(shù)據(jù)庫(kù)

存儲(chǔ)空間比localstorage大（大的多

支持二進(jìn)制存儲(chǔ)

我寫了一個(gè)通訊錄的項(xiàng)目，利用indexeddb在瀏覽器持續(xù)化端存儲(chǔ)通訊錄數(shù)據(jù)
學(xué)習(xí)自: 阮一峰瀏覽器數(shù)據(jù)庫(kù) & indexedDB API

我貼出大概示例：

安裝：

yarn install

運(yùn)行:

yarn start

// DB.ts

interface Idb {
    database: string; // 數(shù)據(jù)庫(kù)名稱
    version: number; // 版本號(hào)
    db: any; // 數(shù)據(jù)庫(kù)創(chuàng)建成功后的對(duì)象
    store: any[]; // 初始化存儲(chǔ)數(shù)據(jù)
    tables: any[]; // 表選項(xiàng)
    
    open(): void; // 打開(kāi)數(shù)據(jù)庫(kù)方法
    add(): void; // 插入一條數(shù)據(jù)
    read(i): void; // 讀取指定數(shù)據(jù)
    readAll(): void; // 讀取全部數(shù)據(jù)
    remove(i): void; // 移除指定數(shù)據(jù)
    update(o): void; // 更新指定數(shù)據(jù)
}

init.ts

import IndexedDB from "./DB";
var db_person = new IndexedDB("db_test", 1);
db_person.open(); // 初始化數(shù)據(jù)庫(kù)操作

云服務(wù)器 GPU云服務(wù)器 indexedDB

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

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

相關(guān)文章

初探IndexedDB

背景隨著前端技術(shù)日新月異地快速發(fā)展，web應(yīng)用功能和體驗(yàn)也逐漸發(fā)展到可以和原生應(yīng)用媲美的程度，前端緩存技術(shù)的應(yīng)用對(duì)這起到了不可磨滅的貢獻(xiàn)，因此想一探前端的緩存技術(shù)，這篇文章主要會(huì)介紹在日常開(kāi)發(fā)中比較少接觸的IndexedDB IndexedDB 什么是IndexedDB IndexedDB簡(jiǎn)單理解就是前端數(shù)據(jù)庫(kù)，提供了一種在用戶瀏覽器中持久存儲(chǔ)數(shù)據(jù)的方法，但是和前端關(guān)系型數(shù)據(jù)不同的是，Index...

jsyzchen 2019-08-23 17:10 評(píng)論0 收藏0
IndexedDB使用與出坑指南

摘要：在不指定的情況下，默認(rèn)版本號(hào)為。具體示例如下在需要更新數(shù)據(jù)庫(kù)的模式時(shí)，需要更新版本號(hào)。此時(shí)我們指定一個(gè)高于之前版本的版本號(hào)，就會(huì)觸發(fā)事件。數(shù)據(jù)操作事務(wù)在中，我們也能夠使用事務(wù)來(lái)進(jìn)行數(shù)據(jù)庫(kù)的操作。概述本文通過(guò)對(duì)IndexedDB的使用方法和使用場(chǎng)景進(jìn)行相關(guān)介紹，對(duì)常見(jiàn)的問(wèn)題進(jìn)行解答。同時(shí)，因?yàn)镸DN中的相關(guān)文檔缺乏相關(guān)邏輯性，所以不容易理解。本文將通過(guò)項(xiàng)目中常見(jiàn)的數(shù)據(jù)存儲(chǔ)和操作需求...

陳偉 2019-08-20 11:04 評(píng)論0 收藏0
indexedDB入門

摘要：概述是一個(gè)事務(wù)型數(shù)據(jù)庫(kù)系統(tǒng)，類似于基于的。然而不同的是它使用固定列表，是一個(gè)基于的面向?qū)ο蟮臄?shù)據(jù)庫(kù)。參考文檔瀏覽器數(shù)據(jù)庫(kù)入門教程概述 IndexedDB 是一個(gè)事務(wù)型數(shù)據(jù)庫(kù)系統(tǒng)，類似于基于 SQL 的 RDBMS。然而不同的是它使用固定列表，IndexedDB 是一個(gè)基于 JavaScript 的面向?qū)ο蟮臄?shù)據(jù)庫(kù)。現(xiàn)有的瀏覽器數(shù)據(jù)儲(chǔ)存方案，都不適合儲(chǔ)存大量數(shù)據(jù)：Cookie 的大小...

awesome23 2019-08-23 15:10 評(píng)論0 收藏0
HTML5 進(jìn)階系列：indexedDB 數(shù)據(jù)庫(kù)

摘要：版本號(hào)必須為整數(shù)更新版本，打開(kāi)版本為的數(shù)據(jù)庫(kù)新數(shù)據(jù)庫(kù)版本號(hào)為我們通過(guò)監(jiān)聽(tīng)請(qǐng)求對(duì)象的事件來(lái)定義數(shù)據(jù)庫(kù)版本更新時(shí)執(zhí)行的方法。前言在 HTML5 的本地存儲(chǔ)中，有一種叫 indexedDB 的數(shù)據(jù)庫(kù)，該數(shù)據(jù)庫(kù)是一種存儲(chǔ)在客戶端本地的 NoSQL 數(shù)據(jù)庫(kù)，它可以存儲(chǔ)大量的數(shù)據(jù)。從上篇：HTML5 進(jìn)階系列：web Storage ，我們知道 web Storage 可以方便靈活的在本地存取...

philadelphia 2019-08-20 16:07 評(píng)論0 收藏0