H5本地存儲技術

時間 2019-12-09

標籤 h5 本地存儲技術简体版

原文原文鏈接

H5 Web存儲技術

前言

web存儲技術在初期的時候被定義爲HTML5的一部分做爲其API。後來被獨立出來做爲一份獨立的標準。
web存儲標準包含localStorage對象和sessionStorage對象。
這兩個對象其實是持久化關聯數組，是名值對的映射表，「名」和「值」都是字符串。Web存儲易於使用、支持大容量(但非無限量)數據存儲同時兼容當前全部主流瀏覽器。html

經過web存儲技術，可讓一些本地應用數據存儲變得更加的方便。web

介紹

Web Storage的目的是克服由cookie帶來的一些限制，當數據須要被嚴格控制在客戶端上時，無須持續地將數據發回服務器。Web Storage的兩個主要目標是：提供一種在cookie以外存儲會話數據的途徑以及提供一種存儲大量能夠跨會話存在的數據的機制數組

Web Storage分紅兩類：sessionStorage和localStorage。sessionStorage保存的數據用於瀏覽器的一次會話，當會話結束(一般是該窗口關閉)，數據被清空；localStorage保存的數據長期存在，下一次訪問該網站的時候，網頁能夠直接讀取之前保存的數據。除了保存期限的長短不一樣，這兩個對象的屬性和方法徹底同樣瀏覽器

它們很像cookie機制的強化版，可以動用大得多的存儲空間。目前，每一個域名的存儲上限視瀏覽器而定，Chrome是2.5MB，Firefox和Opera是5MB，IE是10MB。其中，Firefox的存儲空間由一級域名決定，而其餘瀏覽器沒有這個限制。也就是說，在Firefox中，a.example.com和b.example.com共享5MB的存儲空間。另外，與Cookie同樣，它們也受同域限制。某個網頁存入的數據，只有同域下的網頁才能讀取服務器

經過檢查window對象是否包含sessionStorage和localStorage屬性，能夠肯定瀏覽器是否支持這兩個對象cookie

注意：IE瀏覽器不支持在本地使用storage。session

基本操做

存儲數據

sessionStorage和localStorage保存的數據，都以「鍵對」的形式存在。也就是說，每一項數據都有一個鍵名和對應的值。全部的數據都是以文本格式保存函數

注意：Storage類型只能存儲字符串。非字符串的數據在存儲以前會被轉換成字符串網站

一、setItem()ui

咱們能夠經過setItem()方法來存儲數據。接受兩個參數，第一個參數是鍵名，第二個參數是鍵值也就是保存的數據。

必定要注意，在不一樣的瀏覽器當中，存儲的storage位置並不同，不能通用。

sessionStorage.setItem("key","value");
localStorage.setItem("key","value");

二、getItem()

咱們能夠經過getItem()方法讀取數據。接受一個參數，就是鍵名。

var valueSession = sessionStorage.getItem("key");
var valueLocal = localStorage.getItem("key");

三、經過屬性操做的形式存取數據

除了使用setItem()和getItem()方法，還能夠採用屬性操做的形式來操做數據。

localStorage.setItem("key1","value1");
localStorage.testkey = 'testvalue';
console.log(localStorage.getItem('testkey'));//'testvalue'
console.log(localStorage.key1);//'value1'

清除數據

一、removeItem()

removeItem()方法用於清除某個鍵名對應的數據。

注意：清除不存在的鍵名不會報錯，只會靜默失敗

sessionStorage.removeItem('key');
localStorage.removeItem('key');

除了使用removeItem()方法，還可使用delete操做來清除數據.

注意：IE7-瀏覽器不支持delete操做符來清除storage數據

localStorage.setItem("key1","value1");
delete localStorage.key1;
console.log(localStorage.key1);//undefined
console.log(localStorage.getItem('key1'));//null

二、clear()

clear方法用於清除全部保存的數據。

sessionStorage.clear();
localStorage.clear();

遍歷操做

一、key()

key(index)方法返回index位置處的值的名字。

sessionStorage.setItem("key1","value1");
sessionStorage.setItem("key2","value2");
console.log(sessionStorage.key(0));//'key1'
console.log(sessionStorage.key(1));//'key2'
console.log(sessionStorage.key(2));//null

二、length

length屬性返回名值對兒的個數。

console.log(sessionStorage.length);//2

咱們利用length 和 key 能夠遍歷全部的鍵。

for(var i = 0; i < localStorage.length; i++){
    var key = localStorage.key(i);
    var value = localStorage.getItem(key);
}

還可使用for-in循環來迭代。

for(var key in localStorage){
    var value = localStorage.getItem(key);
}

存儲事件

首先，要特別注意的是，該事件只發生在window對象上，在document對象上觸發無效，且使用DOM0級、DOM2級事件處理函數均可以

不管對sessionStorage仍是localStorage進行操做，都會觸發storage事件。當經過屬性或setItem()方法保存數據，使用delete操做符或removeItem()刪除數據，或者調用clear()方法時，都會發生該事件

注意：只有當存儲數據真正發生改變的時候纔會觸發存儲事件。像給已經存在的存儲項設置一個如出一轍的值，抑或是刪除一個原本就不存在的存儲項都是不會觸發存儲事件的。經過getItem()方法獲取數據也不會觸發該事件

通常地，storage事件不在致使數據變化的當前頁面觸發。若是瀏覽器同時打開一個域名下面的多個頁面，當其中的一個頁面改變sessionStorage或localStorage的數據時，其餘全部頁面的storage事件會被觸發，而原始頁面並不觸發storage事件。能夠經過這種機制，實現多個窗口之間的通訊

注意：IE8-瀏覽器不支持storage事件，IE9+瀏覽器與其餘標準瀏覽器有所不一樣，不管數據真實值是否變化，只要對數據進行設置或刪除，都會觸發該事件，且原始頁面和同一域名下的其餘頁面都會觸發

這個事件的event對象有如下屬性.

url:觸發事件的連接地址
key:設置或者刪除的鍵名
newvalue:若是是設置值，則是新值；若是是刪除鍵，則是null
oldValue:鍵被更改以前的值
storageArea:返回觸發事件的對象

下面是一個事件的應用案例：

a.html:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>多頁面之間的通信</title>
</head>
<body>
    <h1>多頁面之間的通信</h1>
    <!-- 在當前頁面改變數據，會觸發b頁面的事件，可是當前頁面不會觸發 -->
    請輸入你的留言： <br>
    <textarea name="" id="txt1" cols="50" rows="10" style="font-size: 30px;"></textarea>
    <button id="btn">點擊存儲</button>
    <hr>
    <iframe src="./b.html" frameborder="1" width="773" height="346"></iframe>
</body>
<script>
    // let user_name = "zhangsan";
    let btn = document.getElementById('btn');
    btn.onclick = function() {
        // 點擊按鈕獲取用戶輸入的值
        let user_info = document.getElementById('txt1').value;
        // 向本地存儲數據
        localStorage.setItem('zhangsan-1',user_info);
    }
    
    window.onstorage = function () {
        console.log("hello,world!");
    };
</script>
</html>

b.html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>多頁面之間的通信</title>
</head>
<body>
    <script>
        window.onstorage = function (e) {
            var e = e || window.event;
            document.body.innerHTML = e.newValue;
        };
    </script>
</body>
</html>

1. H5本地存儲二
2. h5 localStorage本地存儲
3. h5的本地存儲
4. H5本地存儲一
5. H5的本地存儲
6. h5本地存儲storage
7. H5本地存儲（轉）
8. H5中的本地存儲
9. H5本地儲存Web Storage
10. 關於HTML5本地緩存技術LocalStorage 本地存儲和 SessionStorage
更多相關文章...
• XML 相關技術 - XML 教程
• Hibernate的快照技術 - Hibernate教程
• 三篇文章瞭解 TiDB 技術內幕——說存儲
• Docker容器實戰(一) - 封神Server端技術

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。