當(dāng)前位置：首頁(yè) > 运维知识 > 数据库 >内容正文

数据库

（七）webStorage使用实例——webStorage作为简易数据库来使用

發(fā)布時(shí)間：2024/4/14 数据库 20 豆豆

生活随笔收集整理的這篇文章主要介紹了（七）webStorage使用实例——webStorage作为简易数据库来使用小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

webStorage作為簡(jiǎn)易數(shù)據(jù)庫(kù)來(lái)使用

如果想用webStorage作為數(shù)據(jù)庫(kù)，首先要考慮以下問(wèn)題：

1、在數(shù)據(jù)庫(kù)中，大多數(shù)表都分為幾列，怎樣對(duì)列進(jìn)行管理？

2、怎樣對(duì)數(shù)據(jù)庫(kù)進(jìn)行檢索？

實(shí)現(xiàn)原理：（客戶(hù)聯(lián)系信息管理網(wǎng)頁(yè)）

? 客戶(hù)聯(lián)系信息分為姓名、Email、電話(huà)號(hào)碼、備注這幾列，保存在localStorage中。如果輸入客戶(hù)的姓名并且進(jìn)行檢索可以獲取該客戶(hù)的所有信息；首先，保存數(shù)據(jù)時(shí)將客戶(hù)的姓名作為鍵名來(lái)保存，這樣在獲取客戶(hù)其他信息是會(huì)比較方便；然后，怎樣將客戶(hù)聯(lián)系信息分幾列來(lái)進(jìn)行保存呢？要做到這一點(diǎn)，需要使用JSON格式。將對(duì)象以JSON格式作為文本來(lái)保存，獲取該對(duì)象時(shí)再通過(guò)JSON格式來(lái)進(jìn)行獲取，就可以在webStorage中保存和讀取具有復(fù)雜結(jié)構(gòu)的數(shù)據(jù)了。【JSON格式是javascript Object Notation的縮寫(xiě)，是將javascript中的對(duì)象作為文本形式來(lái)保存時(shí)所使用的一種格式】。

實(shí)現(xiàn)代碼：

database.html

<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title>簡(jiǎn)易數(shù)據(jù)庫(kù)示例</title><script type="text/javascript" src="script3.js"></script> </head> <body><h1>使用webStorage來(lái)做簡(jiǎn)易數(shù)據(jù)庫(kù)示例</h1><table><tr><td>姓名：</td><td><input type="text" id="name"></td></tr><tr><td>Email:</td><td><input type="text" id="email"></td></tr><tr><td>電話(huà)號(hào)碼：</td><td><input type="text" id="tel"></td></tr><tr><td>備注：</td><td><input type="text" id="memo"></td></tr><tr><td></td><td><input type="button" value="保存" οnclick="saveStorage();"></td></tr></table><hr><p>檢索：<input type="text" id="find"><input type="button" value="檢索" οnclick="findStorage('msg');"></p><p id="msg"></p> </body> </html>

script3.js

//用于保存數(shù)據(jù) function saveStorage(){//saveStorage函數(shù)的處理流程//1、從個(gè)輸入文本框中獲取數(shù)據(jù)//2、創(chuàng)建對(duì)象，將獲取的數(shù)據(jù)作為對(duì)象的屬性進(jìn)行保存//3、將對(duì)象轉(zhuǎn)換成JSON格式的文本框//4、將文本數(shù)據(jù)保存到localStorage中var data = new Object;data.name = document.getElementById('name').value;data.email = document.getElementById('email').value;data.tel = document.getElementById('tel').value;data.memo = document.getElementById('memo').value;var str = JSON.stringify(data);localStorage.setItem(data.name,str);alert("數(shù)據(jù)已保存。"); } //用于檢索數(shù)據(jù) function findStorage(id){//findStorage函數(shù)的處理流程//1、在localStorage中，將檢索用的姓名作為鍵值，獲取對(duì)應(yīng)的數(shù)據(jù)//2、將獲取的數(shù)據(jù)轉(zhuǎn)換成JSON對(duì)象//3、取得JSON對(duì)象的各個(gè)屬性值，創(chuàng)建要輸出的內(nèi)容//4、在頁(yè)面上輸出內(nèi)容var find = document.getElementById('find').value;var str = localStorage.getItem(find);var data = JSON.parse(str);var result = "姓名：" + data.name + '<br>';result +="Email:" + data.email + '<br>';result +="電話(huà)號(hào)碼：" +data.tel + '<br>';result +="備注：" + data.memo + '<br>';var target = document.getElementById(id);target.innerHTML = result; }

運(yùn)行結(jié)果：

超強(qiáng)干貨來(lái)襲云風(fēng)專(zhuān)訪(fǎng)：近40年碼齡，通宵達(dá)旦的技術(shù)人生

總結(jié)

以上是生活随笔為你收集整理的（七）webStorage使用实例——webStorage作为简易数据库来使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：（六）Web Storage的使用实例—
下一篇：（八）webStorage使用实例——利