HTML5本地儲存IndexDB學習之入門篇

2021-10-05 04:31:21 字數 2601 閱讀 4050

能夠實現基本的本地indexdb的建立,增加資料,刪除資料

**如下:

<

!doctype html>

"en"

>

"utf-8"

>

indexeddb<

/title>

* #container

table

thead

td<

/style>

<

/head>

"container"

>

姓名<

/label>

"text" placeholder=

"請輸入你的姓名" id=

"add_name"

/>

年齡<

/label>

"text" placeholder=

"請輸入你的年齡" id=

"add_age"

/>

"add_btn"

>新增使用者<

/button>

<

/form>

主鍵值:<

/label>

"text" placeholder=

"請輸入你要刪除的主鍵值" id=

"delete_primary_key"

/>

姓名<

/label>

"text" placeholder=

"請輸入你要刪除的姓名" id=

"delete_name"

/>

"delete_btn"

>刪除使用者<

/button>

<

/form>

主鍵<

/td>

姓名<

/td>

年齡<

/td>

<

/tr>

<

/thead>

"_tbody"

>

<

/tbody>

<

/table>

<

/div>

<

/body>

<

/html>

window.

onload

=function()

//開啟資料庫成功,onsuccess事件被觸發

request.

onsuccess

=function()

//在新的資料庫建立或資料庫版本號被修改時,onupgradeneeeded事件被觸發

request.

onupgradeneeded

=function

(event)

) console.

log(

"物件倉庫建立成功"

+ objstore)

;//在物件倉庫下面建立索引表

objstore.

createindex

('nameindex'

,'name',)

; objstore.

createindex

('ageindex'

,'age',)

; console.

log(

'索引表建立成功');

}}}// 新增資料

document.

getelementbyid

('add_btn').

onclick

=function()

; students.

push

(str);if

(add_name !=

""&& add_age !="")

else

}function

adddata

(dbname, objstorename, students)}}

//顯示資料

showdata

(dbname, objstorename, version)

;function

showdata

(dbname, objstorename, version)

openrequest.

onsuccess

=function

(ev)

document.

getelementbyid

('_tbody'

).innerhtml += strhtml;}}

} document.

getelementbyid

("delete_btn").

onclick

=function()

else

}function

deletedata

(dbname, objstorename, primary_key)

del.

onerror

=function()

}}}<

/script>

HTML5本地儲存

align center html5本地儲存 align b 1.1概述 b html5 儲存是基於鍵值對的。資料儲存在乙個鍵裡,訪問資料時可以根據同樣的鍵獲得上次儲存的資料。鍵是乙個字串。而資料則可以是任何型別的js基本資料型別,包括字串,boolean,整數,和浮點數。需要注意的是,這些資料在儲...

html5 本地儲存

前言 最近在做專案時遇到了需要將資料儲存在使用者瀏覽器本地的需求,經過查詢了解到了web storage,通過學習初步掌握了web storage,以下是一些關於web storage的知識和用法,記憶力較差發布在csdn備忘。1 什麼是html5本地儲存?通過web storage web應用程式...

html5 本地儲存

最近一直在學習 html5,為了後期的專案進行知識儲備。html5 相對於 html4 新增加了一些有趣的標籤 屬性和方法,今天主要介紹下 html5 的本地儲存。html5 提供了兩種在客戶端儲存資料的新方法 兩個方法用法完全一樣,下面就以localstorage為例。早期我們都是使用cookie...