日日操夜夜添-日日操影院-日日草夜夜操-日日干干-精品一区二区三区波多野结衣-精品一区二区三区高清免费不卡

公告:魔扣目錄網(wǎng)為廣大站長提供免費(fèi)收錄網(wǎng)站服務(wù),提交前請做好本站友鏈:【 網(wǎng)站目錄:http://www.ylptlb.cn 】, 免友鏈快審服務(wù)(50元/站),

點(diǎn)擊這里在線咨詢客服
新站提交
  • 網(wǎng)站:51998
  • 待審:31
  • 小程序:12
  • 文章:1030137
  • 會員:747

一、背景介紹

第一個Web存儲的技術(shù)叫做Cookie,它是網(wǎng)站的身份證。是網(wǎng)站為了辨別用戶身份,進(jìn)行session(服務(wù)端的session)跟蹤而存儲在用戶本地終端上的數(shù)據(jù),也就是說它是存在電腦硬盤上的,一個很小的txt類型的文件。Cookie每次都會跟隨http請求發(fā)送到服務(wù)端,也就是說每一個http請求都會帶上我們的cookie數(shù)據(jù),因此它存在一個安全性的問題。

cookie本身也是有很大的局限性的,首先它很小,主流的瀏覽器最大支持 4096 字節(jié),除了最大字節(jié)的限制,每個網(wǎng)站的cookie個數(shù)(也就是每一個first每一個域)也是有限制的,一般瀏覽器是20個。除此之外,cookie還會默認(rèn)跟隨所有http請求發(fā)送,即使不需要使用這個cookie來鑒別用戶但是它也是會跟隨http請求發(fā)送的,這樣就會造成一個網(wǎng)絡(luò)資源的浪費(fèi)。然后部分的瀏覽器還限制了總的cookie個數(shù)300個。

在cookie的諸多局限性下,Web Storage應(yīng)運(yùn)而生。Web Storage 解決了很多問題:

比如它支持存儲大量數(shù)據(jù),支持復(fù)雜的本地數(shù)據(jù)庫,而且也不會默認(rèn)跟隨http請求。Web Storage主要是有四個:

  • SessionStorage
  • LocalStorage
  • WebSQL
  • indexedDB

二、Cookie的簡單介紹

Cookie是html4的一個標(biāo)準(zhǔn),它一般不需要考慮兼容。它是網(wǎng)站的一個身份證,服務(wù)器可以針對不同用戶,做出不同的響應(yīng)。cookie存儲在用戶的機(jī)器上是一個純文本,就是一個txt文件并不是一個腳本,它不能執(zhí)行東西只負(fù)責(zé)記錄。瀏覽器每次請求都會帶上當(dāng)前網(wǎng)站的cookie。

Cookie分為兩種類型,一種呢是會話cookie,也就是臨時性的cookie,退出瀏覽器或者是關(guān)閉即刪除;

另一種叫持久cookie,它會一直存在,存在的時間由特定的過期時間或者是有效期來決定。

Cookie的域 Domain決定了當(dāng)前的一個cookie的權(quán)限,哪一個域可以使用這個cookie。

Cookie的路徑 Path,下面一個簡單的例子:

www.baidu.com id="123456" domain="www.baidu.com"
www.baidu.com/user id="123456" user="eric" domain="www.baidu.com" path="/user/"
?
www.baidu.com/search id="123456";
www.baidu.com/user/search id="123456" user="eric";

如上www.baidu.com設(shè)置了一個id等于123456,domain是www.baidu.com,然后另外一個跟第一個一樣多設(shè)置了一個user,id相同,但是多了一個user=“Eric”,它的domain設(shè)置成了www.baidu.com,path就到了user下面。這兩者設(shè)置完成之后,當(dāng)我們訪問www.baidu.com/search時百度只能拿到id,因?yàn)閡ser="Eric"是屬于user這個域下面的,也就是說在search下面是獲取不到的,但是在www.baidu.com/user/search這個時候我們就可以獲取到名叫Eric的user。Path也是一種權(quán)限的控制只是相較于域domain是低一級的。

Cookie的安全secure,如果這個屬性為TRUE,那么網(wǎng)站只有在https的請求下面才會攜帶當(dāng)前的cookie。

Cookie的HttpOnly這個屬性如果為TRUE,那么就不允許JAVAScript操作cookie。

因?yàn)閏ookie是存儲在客戶端一個獨(dú)立的文件,因此服務(wù)器是無法分辨用戶和攻擊者的。關(guān)于cookie的目的分為兩種:一種是跨站點(diǎn)腳本攻擊,一種是跨站請求偽造。

三、SessionStorage

key-value的鍵值對,是HTML5新增的一個會話存儲對象。

SessionStorage是臨時保存在同一窗口,也就是同一標(biāo)簽頁的數(shù)據(jù)。如果當(dāng)前標(biāo)簽頁關(guān)閉了,那么SessionStorage也就失效了。這也是SessionStorage最顯著的一個特點(diǎn):單頁標(biāo)簽限制。

除此之外,它還有的一些特點(diǎn)有:

  • 同源策略,也就是在同一協(xié)議,同一主機(jī)名和同一端口下的同一tab
  • 只在本地存儲,不會跟隨http請求發(fā)送到服務(wù)器
  • 存儲方式采用key-value鍵值對,這里面的value只能存字符串類型,如果存其他的會自動轉(zhuǎn)換成字符串。
  • 存儲上線限制達(dá)到了5MB,如果當(dāng)前存儲超出上限新的內(nèi)容會把舊的內(nèi)容覆蓋但不會報錯。

屬性:

  • sessionStorage.length - 鍵值對數(shù)量
  • sessionStorage.key(int index) -> null
  • sessionStorage.getItem(string key) -> null
  • sessionStorage[string key]
  • sessionStorage.setItem(string key, string value)
  • sessionStorage.removeItem(string key)
  • sessionStorage.clear()

Json對象

  • JSON.stringify()
  • JSON.parse()

四、LocalStorage

LocalStorage也是在瀏覽器的Application下面有一個Local Storage,它和SessionStorage是十分相似的,同樣是key-value鍵值對,也是HTML5的新增存儲對象,它與SessionStorage的特點(diǎn)不同之處在于沒有標(biāo)簽頁的限制和在瀏覽器的無痕模式下LocalStorage是不允許讀取的,永久性的存儲,然后SessionStorage超出限制是覆蓋不會報錯而LocalStorage超出會報錯。

特點(diǎn)**:

  • 同源策略,也就是在同一協(xié)議,同一主機(jī)名和同一端口下的同一tab
  • 沒有標(biāo)簽頁的限制
  • 只在本地存儲,不會跟隨http請求發(fā)送到服務(wù)器
  • 存儲方式采用key-value鍵值對,這里面的value只能存字符串類型,如果存其他的會自動轉(zhuǎn)換成字符串。
  • 存儲上線限制達(dá)到了5MB,如果當(dāng)前存儲超出上限會報錯。
  • 無痕模式下不可讀取
  • 永久性存儲

屬性:

  • sessionStorage.length - 鍵值對數(shù)量
  • sessionStorage.key(int index) -> null
  • sessionStorage.getItem(string key) -> null
  • sessionStorage[string key]
  • sessionStorage.setItem(string key, string value)
  • sessionStorage.removeItem(string key)
  • sessionStorage.clear()

注意事項:LocalStorage和SessionStorage在web view是不可靠的,web view指的是在開發(fā)混合APP的時候使用了瀏覽器來實(shí)現(xiàn)我們的APP,這個時候是不可靠的,因?yàn)樵跒g覽器崩潰的情況下數(shù)據(jù)可能沒有存進(jìn)去。

另外一個在IOS瀏覽器中不可重復(fù)setItem,如果重復(fù)會報錯,然后這個時候我們需要先removeItem再添加item。

監(jiān)聽storage的變化

監(jiān)聽storage包括SessionStorage和LocalStorage。然后這里需要提到兩個概念:同源和監(jiān)聽同源網(wǎng)頁。

  • 同源:協(xié)議、域名、端口三者相同,同源的情況下我們可以共享SessionStorage和LocalStorage。
  • 同源策略還禁止不同源執(zhí)行任何腳本。
http://localhost:63342/simpleApp/app/index.html#/
(協(xié)議) (域名) (端口) (路徑)
  • 監(jiān)聽同源網(wǎng)頁,但是同一網(wǎng)頁是無效的
window.addEventListener("storage", function (event) {
 console.log(event.key);
 console.log(event.oldValue);
 console.log(event.newValue);
 console.log(event.url);
 console.log(event.storageArea);
});

五、IndexedDB

IndexedDB 背景

  • Storage(Storage指的是SessionStorage和LocalStorage)不適合存儲大量的數(shù)據(jù)
  • Storage不能提供搜索功能
  • Storage不能建立索引,存儲的內(nèi)容也比較少
  • IndexedDB擴(kuò)大了web存儲的容量,可以達(dá)到250MB以上

基本概念

首先它是一個NoSQL,也就是一個非關(guān)系型數(shù)據(jù)庫。MySQL和Oracle都是關(guān)系型數(shù)據(jù)庫。意思就是說如果建立了兩個表在關(guān)系型數(shù)據(jù)庫里面我們可以通過一個外鏈把多個表聯(lián)系起來,但是NoSQL不行,在NoSQL里面如果想要多個表關(guān)聯(lián)起來,我們只能手動的在關(guān)聯(lián)的表里面添加上需要關(guān)聯(lián)的另外一個或多個表的id。這是NoSQL與MySQL兩者之間的一個區(qū)別。

IndexedDB的特點(diǎn)也是和Storage是一樣的:

  • 鍵值對儲存 ,但是允許所有類型,不允許主鍵重復(fù)報錯
  • 是一個異步操作, 不阻塞瀏覽器線程
  • 支持事務(wù),事務(wù)是SQL數(shù)據(jù)庫的一個概念,也就是說我們進(jìn)行任何的增刪改查都要在某一個事務(wù)下面進(jìn)行,提供了一個回滾功能,一系列操作有一步失敗, 數(shù)據(jù)庫回滾到事務(wù)發(fā)生之前的狀態(tài),這樣為了避免操作中途出現(xiàn)失敗,影響整個數(shù)據(jù)庫的狀態(tài)
  • 同源限制
  • 支持二進(jìn)制儲存

IndexedDB幾個基本概念:

  • IDBDatabase - 數(shù)據(jù)庫
  • IDBObjectStore - 對象倉庫
  • IDBIndex - 索引
  • IDBTransaction - 事務(wù)
  • IDBRequest - 操作請求
  • IDBCursor - 指針
  • IDBKeyRange - 主鍵集合

IndexedDB瀏覽器兼容

Web 存儲技術(shù)

 

IDBDatabase

IDB是IndexedDB的縮寫,它呢就是數(shù)據(jù)庫,數(shù)據(jù)庫也叫作數(shù)據(jù)的一個容器。每一個源(同源策略)可以建立很多數(shù)據(jù)庫。Database有一個版本的概念,版本對應(yīng)著數(shù)據(jù)庫表,同一時刻只能存在一個版本。比如:新增一個表,然后我們需要把database的版本加一,表里面要新增一列,這時同樣需要把數(shù)據(jù)庫版本加一。

注意:1 同一時刻只能有一個版本存在

? 2 修改數(shù)據(jù)庫結(jié)構(gòu)只能通過升級數(shù)據(jù)庫版本

  • 打開數(shù)據(jù)庫
/* databaseName不存在則創(chuàng)建 */
/* version為整數(shù), 新建時為1 */
?
let database;
let userStore;
const request = window.indexedDB.open(databaseName, version);
?
/* 成功打開數(shù)據(jù)庫 */
request.onsuccess = event => {
 database = request.result;
}
?
/* 打開數(shù)據(jù)庫失敗 */
request.onerror = error => {
 console.log(error);
}
?
/* 版本號大于當(dāng)前數(shù)據(jù)庫版本 */
request.onupgradeneeded = event => {
 database = event.target.result;
}

注意:如果在打開數(shù)據(jù)庫時,數(shù)據(jù)庫不存在,將會新建一個

IDBObjectStore(數(shù)據(jù)庫表)

創(chuàng)建表,最好是在upgradeneeded下執(zhí)行;在創(chuàng)建數(shù)據(jù)庫表的時候需要指定主鍵,主鍵代表了唯一的標(biāo)識,比如 keyPath:‘id’;如果不指定主鍵,我們可以指定一個autoIncrement:true,自增的一個概念,也就是不指定主鍵數(shù)據(jù)庫會自動添加主鍵而且這個主鍵就是數(shù)字,依次遞增的。

const createStore = () => {
 //如果當(dāng)前的objectStoreNames.contains包含user,如果不包含user這個表,然后就用這個database.createObjectStore創(chuàng)建了一個表,這個表的名字就叫做user,然后主鍵就是下面的id
 if(!db.objectStoreNames.contains('user')) {
 userStore = database.createObjectStore('user', { keyPath: 'id' });
 }
}

指定索引:

const createStore = () => {
 if(!database.objectStoreNames.contains('user')) {
 userStore = database.createObjectStore('user', { keyPath: 'id' });
 userStore.createIndex('name', 'name', { unique: true });
 }
}

IDBTransaction(事務(wù))

創(chuàng)建完之后需要往里面添加數(shù)據(jù),添加數(shù)據(jù)我們就需要使用到事務(wù)。

事務(wù)涉及到數(shù)據(jù)庫的增刪改查,它有三個狀態(tài):

  • complete
  • error
  • abort

屬性:

  • IDBTransaction.db 當(dāng)前數(shù)據(jù)庫
  • IDBTransaction.mode 模式,使用模式分為readonly和readwrite
  • IDBTransaction.objectStoreNames 當(dāng)前數(shù)據(jù)庫涉及到的哪幾個數(shù)組表
  • IDBTransaction.error 回調(diào)

數(shù)據(jù)庫的基本操作:增刪改查以及清空。

新增數(shù)據(jù)(add)

分為兩種情況:一種是使用自增的數(shù)據(jù)庫的id或者是自增的一個鍵值,如果已經(jīng)創(chuàng)建主鍵,那么新增必須包含主鍵和另一種已創(chuàng)建主鍵但主鍵不可重復(fù)。

const add = () => {
 /* 創(chuàng)建事務(wù) */
 /* 使用某個數(shù)據(jù)庫 */
 /* add新增 */
 transactionRequest = database.transaction(['user'], 'readwrite')
 .objectStore('user')
 .add({ id: 100, name: 'Eric', age: 28, email: '[email protected]' });
?
 /* 成功 */
 transactionRequest.onsuccess = event => {
 console.log('數(shù)據(jù)寫入成功', event);
 };
?
 /* 失敗 */
 transactionRequest.onerror = error => {
 console.log('數(shù)據(jù)寫入失敗', error);
 }
}

讀取數(shù)據(jù)(get)

const read = () => {
 /* 創(chuàng)建事務(wù) */
 transaction = database.transaction(['user']);
 /* 選擇數(shù)據(jù)庫表 */
 table = transaction.objectStore('user');
 /* 讀取數(shù)據(jù) */
 transactionRequest = table.get(2);
?
 /* 成功 */
 transactionRequest.onerror = event => {
 console.log('數(shù)據(jù)讀取失敗', event);
 };
?
 /* 失敗 */
 transactionRequest.onsuccess = event => {
 if (transactionRequest.result) {
 console.log('數(shù)據(jù)讀取成功', transactionRequest.result);
 } else {
 console.log('未讀取到數(shù)據(jù)');
 }
 };
}

更新數(shù)據(jù)(put)

更新不存在的數(shù)據(jù)時會新建,也就是說在新增數(shù)據(jù)時如果相同,往往會出錯,但是在更新數(shù)據(jù)時不會出錯。如果數(shù)據(jù)不存在就會新建,如果存在就會一直更新。

const update = () => {
 transactionRequest = database.transaction(['user'], 'readwrite')
 .objectStore('user')
 .put({ id: count, name: 'David', age: 35, email: '[email protected]' });
?
 transactionRequest.onsuccess = function (event) {
 console.log('更新數(shù)據(jù)成功', event);
 };
?
 transactionRequest.onerror = error => {
 console.log('更新數(shù)據(jù)失敗', error);
 }
 }

刪除數(shù)據(jù)(delete)

const delete = () => {
 transactionRequest = database.transaction(['user'], 'readwrite')
 .objectStore('user')
 .delete(2);
?
 transactionRequest.onsuccess = function (event) {
 console.log('刪除數(shù)據(jù)成功', event);
 };
?
 transactionRequest.onerror = error => {
 console.log('刪除數(shù)據(jù)失敗', error);
 }
 }

清空數(shù)據(jù)(clear)

IDBCursor(指針)

提供了一種遍歷數(shù)據(jù)的可能。

const readAll = () => {
 table = database.transaction('user').objectStore('user');
?
 table.openCursor().onsuccess = () => {
 let cursor = event.target.result;
?
 if (cursor) {
 console.log('數(shù)據(jù)遍歷', cursor);
 cursor.continue();
 } else {
 console.log('數(shù)據(jù)遍歷完成');
 }
 };
 }

關(guān)閉IndexedDB數(shù)據(jù)庫連接

const closeDataBase = () => {
 database.close();
}

刪除IndexedDB數(shù)據(jù)庫前,須先關(guān)閉數(shù)據(jù)庫連接

const deleteDataBase = () => {
 indexedDB.deleteDatabase('first_database');
}

六、WebSQL

基本概念:并不是 HTML5 的規(guī)范 , 只能算是一個獨(dú)立的規(guī)范;使用WebSQL是完完全全的SQL 語句,使用SQL語句來操作客戶端數(shù)據(jù)庫;它一共有三個比較重要的概念,分別是:openDatabase 打開數(shù)據(jù)庫,可以是使用現(xiàn)有數(shù)據(jù)庫或者新建數(shù)據(jù)庫;transaction 事務(wù),所有的數(shù)據(jù)庫都支持事務(wù);executeSql 執(zhí)行SQL語句。

openDatabase(打開數(shù)據(jù)庫)

相比于IndexedDB的概念稍微多一點(diǎn),主要是有數(shù)據(jù)庫名稱、版本號(在IndexedDB里面版本號都是整數(shù),但是在WebSQL里面它可以是小數(shù))、描述文本(介紹數(shù)據(jù)庫是干什么的)、數(shù)據(jù)庫大小和創(chuàng)建回調(diào)(function,只在第一次創(chuàng)建的時候才會調(diào)用)。

const database = openDatabase('my_database', '1.0', 'first', 2 * 1024 * 1024, function() {
?
});

Transaction(事務(wù))

  • 創(chuàng)建表
const createTable = () => {
 database.transaction(function (content) { 
 content.executeSql('CREATE TABLE IF NOT EXISTS USER (id unique, name)');
 });
}
  • 添加數(shù)據(jù)
const addData = () => {
 database.transaction(function (content) { 
 content.executeSql('INSERT INTO USER (id, name) VALUES (1, "Eric")');
 });
}
  • 查詢數(shù)據(jù)
const searchData = () => {
 database.transaction(function (content) { 
 content.executeSql('SELECT * FROM USER');
 });
}
  • 更新數(shù)據(jù)
const updateData = () => {
 database.transaction(function (content) { 
 content.executeSql('UPDATE USER SET name='David' WHERE id=1');
 });
}
  • 刪除數(shù)據(jù)庫表
const deleteDataBase = () => {
 database.transaction(function (content) { 
 content.executeSql('DROP TABLE USER');
 });
 }

分享到:
標(biāo)簽:Web
用戶無頭像

網(wǎng)友整理

注冊時間:

網(wǎng)站:5 個   小程序:0 個  文章:12 篇

  • 51998

    網(wǎng)站

  • 12

    小程序

  • 1030137

    文章

  • 747

    會員

趕快注冊賬號,推廣您的網(wǎng)站吧!
最新入駐小程序

數(shù)獨(dú)大挑戰(zhàn)2018-06-03

數(shù)獨(dú)一種數(shù)學(xué)游戲,玩家需要根據(jù)9

答題星2018-06-03

您可以通過答題星輕松地創(chuàng)建試卷

全階人生考試2018-06-03

各種考試題,題庫,初中,高中,大學(xué)四六

運(yùn)動步數(shù)有氧達(dá)人2018-06-03

記錄運(yùn)動步數(shù),積累氧氣值。還可偷

每日養(yǎng)生app2018-06-03

每日養(yǎng)生,天天健康

體育訓(xùn)練成績評定2018-06-03

通用課目體育訓(xùn)練成績評定