首頁 > web前端 > H5教程 > 主體

web儲存--webstorage詳細介紹

PHP中文网
發布: 2017-06-20 13:55:49
原創
2110 人瀏覽過
  • web儲存分類

    • 用戶端和服務端

    • 認識web儲存
  • 隨著web應用的發展,是的客戶端儲存的用途越來越多,然而實現客戶端端儲存的方式也越來越多樣化化。最簡單、最相容的方式就是cookie,但作為真正的客戶端儲存cookie還是存在著許許多多的弊端的。同時,各種瀏覽器也有屬於自己的儲存方式。例如,IE6以及以上版本中可以使用userData Behavior,在Firefox中可以使用globalStorage,而在Flash插件還可以使用Flash Local Storage,但是這幾種方式存在著兼容性等方面的弊端,而對於客戶端的存儲不屬於最好的方式。
    • 由於上述情況,html5中增加的了幾種新的儲存方式。 web Database和web Storage。
    • 各種方式儲存之間的差異
    • #認識webstorage

    • 優點

    • 缺點

    • localStorage

    • sessionStorage 

    • 瀏覽器支援

    • 這是html5新增的客戶端儲存資料的方式,提供了易於操作的api,只需要設定鍵值的方式即可。在每個用戶域下面儲存的資料大小在5M-10M。包含下面的sessionStorage和localStorage。同時,也包括web Database。 


    • 儲存的資料大小較大。
    • 儲存的資料保存在客戶端,不需要與瀏覽器進行通信,這樣可以減少我們的頻寬消耗。
    • 提供了豐富易用的API,讓開發者更容易的開發。
    • 使用獨立的儲存空間。每個域下面都有獨立的儲存空間,每個空間完全獨立,可以避免資料的錯亂(這點其實和cookie沒什麼太大的差別)。    
    • 由於每個域下面儲存的資料都是獨立的空間,我們在一個域下面是不能使用其他域下面的資料。 
    • 由於資料在沒有我們進行主動的刪除的情況下,儲存的資料是一直保存在的並且資料沒有進行加密處理,很容易造成資料的竊取。 
    • localStorage是一種沒有時間限制的儲存方式,除非我們自己主動的清除資料不然資料是不會遺失的。  
    • sessionStorage是針對session的儲存方式,當我們瀏覽器或操作視窗執行了關閉操作,sessionStorage儲存的資料將會遺失。同時只能在同一個會話的頁面中才能使用。
    • IE8.0以上,Firefox3.0以上,opera10.5以上,chrome3.0以上,safari4.0以上。
    • cookie工作原理

    • #優點

  • ##cookie作為一種客戶端儲存的方式,主要採用的是文字儲存。當有應用程式使用cookie的時候,伺服器會將cookie傳送到客戶端,客戶端進行儲存。當使用者進行下次存取時,會將客戶端儲存的cookie傳送到伺服器上面。在開發中,最典型的案例就是用來儲存使用者資訊。

    • 簡單方便
    • 瀏覽器負責發送資料
    • 瀏覽器自己管理不同網站的數據,不容易發生數據的錯亂等情況
    • 正如上面講到的cookie工作原理,我們透過服務端到客戶端,客戶端到伺服器之間的通訊。這樣造成有的不必要的頻寬消耗,同時也影響頁面的載入速度導致使用者的體驗性變差。
    • 儲存的資料大小限制,cookie只能儲存4kb大小的資料。
    • 安全性。 Cookie的資料以文字的方式存在客戶端上面,安全性很低,很容易造成資料被竊取。

    • 數量限制。多數瀏覽器可儲存的cookie數量為30-50個,也有的瀏覽器支援300個,而IE6只支援20個。
    • 資料完整性。當我們客戶端設定為最高安全等級的時候,我們的cookie會失效。

    • cookie的優缺點

    • web storage的優缺點
    • 實例程式碼

    • 注意:localStorage和sessionStorage儲存的都是字串物件。


    • 建立
    • 取得儲存
    • 刪除儲存

    #

<script type="text/javascript">// 创建均使用localStorage做示例,sessionStorage语法方式和localStorage是一样的,localStorage(key, value);或者localStorage.key = "value";window.onload = function(){if (window.localStorage) {
                localStorage.setItem("userName", "张三");}
        }</script>
登入後複製

 ###    ############
<script type="text/javascript">window.onload =  (window.localStorage &&"userName", "张三""userName"</script>
登入後複製
###### #######  ############ #######  ########## ##################
<script type="text/javascript">window.onload =  (window.localStorage &&"userName", "hello,world!"</script>
登入後複製
###### #######    ############################################################## ########偵測目前瀏覽器是否支援############
    <script type="text/javascript">// 验证当前的浏览器是否支持localStorage和sessionStoragewindow.onload = function(){if (window.localStorage && window.sessionStorage) {alert("你的浏览器支持localStorage和sessionStorage");
            }
        }</script>
登入後複製
###### ########################################## ####

以上是web儲存--webstorage詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!