国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Web Storage--HTML5本地存儲

mtunique / 2303人閱讀

摘要:什么是是里面引入的一個類似于的本地存儲功能,可以用于客戶端的本地存儲,其相對于來說有以下幾點優勢存儲空間大只有的存儲空間,而在官方建議中為每個網站。而則是將數據存儲在本地,理論上來說數據永遠不會消失,除非人為刪除。

什么是Web Storage

Web Storage是HTML5里面引入的一個類似于cookie的本地存儲功能,可以用于客戶端的本地存儲,其相對于cookie來說有以下幾點優勢:

存儲空間大:cookie只有4KB的存儲空間,而Web Storage在官方建議中為每個網站5M。

可選擇性強:Web Storage分為兩種:sessionStoragelocalStorage

Web Storage的使用方法

在使用上,session Storagelocal Storage大同小異,只是session Storage是將數據臨時存儲在session中,瀏覽器關閉,數據隨之消失。而local Storage則是將數據存儲在本地,理論上來說數據永遠不會消失,除非人為刪除。

API:

保存數據 localStorage.setItem( key, value ); sessionStorage.setItem( key, value );

讀取數據 localStorage.getItem( key ); sessionStorage.getItem( key );

刪除單個數據localStorage.removeItem( key ); sessionStorage.removeItem( key );

刪除全部數據localStorage.clear( ); sessionStorage.clear( );

獲取索引的keylocalStorage.key( index ); sessionStorage.key( index );

注意:Web Storage的API只能操作字符串


在使用Web Storage之前,我們需要注意以下幾點:

僅支持支持IE8及以上版本

由于只能對字符串類型數據進行操作,所以對一些JSON對象需要進行轉換

因為是明文存儲,所以毫無隱私性可言,絕對不能用于存儲重要信息

會是瀏覽器加載速度在一定程度上變慢

無法被爬蟲程序爬取

使用Web Storage之前,請加上以下代碼,對瀏覽器對Web Storage的支持性進行判斷

if(window.localStorage){//或者window.sessionStorage     
    alert("瀏覽器支持localStorage")
    //主邏輯業務
}else{      
    alert("瀏覽不支持localStorage")
    //替代方法
}   
  

我們來寫一個學生管理小程序用于演示Web Storage的基本用法

簡單的html頁面先準備好

    












在這個程序里面我們將實現增刪查的基本功能,修改數據的功能相信大家看完后自己就能寫出來。

接下來開始寫方法:

存儲

//利用localStorage存儲數據
function save() {
    var contact = new Object();
    var Name = document.getElementById("name").value;
    var Sex = document.getElementById("sex").value;
    var Num = document.getElementById("num").value;
    var Add = document.getElementById("add").value;
    var Tel = document.getElementById("tel").value;
    if(JTrim(Name) != "" && JTrim(Sex) != "" && JTrim(Num) != "" && JTrim(Add) != "" && JTrim(Tel) != "") {
        contact.name = Name;
        contact.sex = Sex;
        contact.num = Num;
        contact.add = Add;
        contact.tel = Tel;
        var str = JSON.stringify(contact);//對JSON對象進行處理,用于從一個對象解析出字符串
        if(window.localStorage) {
            localStorage.setItem(contact.name,str);
        } else {
            alert("您暫時還無法使用本功能");
            return;
        }
    } else {
        alert("請輸入內容");
    }
}

其中用到了Trim()這個方法,用于判斷輸入是否為空

function JTrim(s) {
    return s.replace(/(^s*)|(s*$)/g, "");
}

展示所有信息

function loadAll() {
    var resource = document.getElementById("list");
    if(window.localStorage) {
        var result = "";
        result += "";
        for(var i = 0;i < localStorage.length; i++) {
            var Name = localStorage.key(i);//用于得到索引的key,在這個程序里,key為name
            var str = localStorage.getItem(Name);
            var contact = JSON.parse(str);//對JSON對象進行處理,用于從一個字符串中解析出JSON對象
            result += ""; 
        }
        result += "
姓名性別學號家庭住址電話號碼
"+contact.name+""+contact.sex+""+contact.num+""+contact.add+""+contact.tel+"
"; resource.innerHTML = result; } else { alert("您暫時還無法使用本功能"); return; } }

查詢

function search() {
    var resource = document.getElementById("tato");
    var search_name = document.getElementById("search_name").value;
    if(window.localStorage) {
        var str = localStorage.getItem(search_name);
        if(str != null) {
            var result = "";
            result += "";
            var contact = JSON.parse(str);
            result += "";
            result += "
姓名性別學號家庭住址電話號碼
"+contact.name+""+contact.sex+""+contact.num+""+contact.add+""+contact.tel+"
"; resource.innerHTML = result; } else { alert("系統無此人"); return; } } else { alert("您暫時還無法使用本功能"); return; } }

刪除

function del() {
    var del_name = document.getElementById("del_name").value;
    if(window.localStorage) {
        var result = localStorage.getItem(del_name);
        localStorage.removeItem(del_name);
        if(result != null) {
            alert("刪除成功");           
        } else {
            alert("系統無此人");
            return;
        }

    } else {
        alert("您暫時還無法使用本功能");
        return;        
    }
}

在這里如果想對所有數據做刪除處理則只需將localStorage.removeItem();換成localStorage.clear();即可

Demo地址--魔改了一下界面,開心就好=.=


現在讓我們在瀏覽器的開發者工具里面看一看Web Storage到底是怎么存儲的

我們可以在chrome開發者工具里面找到Application這個選項,其中就有今天的主角:Local StorageSession Storage

現在輸入一些數據

點擊提交之后我們立刻就能在Local Storage里面看到明文存儲的數據(后面的value是以JSON對象來存儲的,所以在對其進行操作的時候需要轉換格式)

總結

Web Storage固然簡單實用,但是數據的明文存儲實在是硬傷,所以各位使用之前請三思

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/50304.html

相關文章

  • Web Storage--HTML5本地存儲

    摘要:什么是是里面引入的一個類似于的本地存儲功能,可以用于客戶端的本地存儲,其相對于來說有以下幾點優勢存儲空間大只有的存儲空間,而在官方建議中為每個網站。而則是將數據存儲在本地,理論上來說數據永遠不會消失,除非人為刪除。 什么是Web Storage Web Storage是HTML5里面引入的一個類似于cookie的本地存儲功能,可以用于客戶端的本地存儲,其相對于cookie來說有以下幾點...

    lykops 評論0 收藏0
  • 本地存儲——Cookie與Web Storage

    摘要:是客戶端用來存儲數據的它既可以在客戶端設置也可以在服務器端設置。會跟隨任意請求一起發送標準中的包括了兩種存儲方式和用于本地存儲一個會話中的數據,這些數據只有在同一個會話中的頁面才能訪問并且當會話結束后數據也隨之銷毀。 Cookie cookie是客戶端用來存儲數據的,它既可以在客戶端設置也可以在服務器端設置。cookie會跟隨任意HTTP請求一起發送 Web Storage htm...

    mating 評論0 收藏0
  • Web Storage 與cookies

    摘要:和雖然也有存儲大小的限制,但比大得多,可以達到或更大支持事件通知機制,可以將數據更新的通知發送給監聽者。有時也用,指某些網站為了辨別用戶身份,進行跟蹤而存儲在本地終端上的數據,通常經過加密。 Web Storage介紹 Web Storage帶來的好處 減少網絡流量:一旦數據保存在本地后,就可以避免再向服務器請求數據,因此減少不必要的數據請求,減少數據在瀏覽器和服務器間不必要地來回傳...

    zhkai 評論0 收藏0
  • Web Storage 與cookies

    摘要:和雖然也有存儲大小的限制,但比大得多,可以達到或更大支持事件通知機制,可以將數據更新的通知發送給監聽者。有時也用,指某些網站為了辨別用戶身份,進行跟蹤而存儲在本地終端上的數據,通常經過加密。 Web Storage介紹 Web Storage帶來的好處 減少網絡流量:一旦數據保存在本地后,就可以避免再向服務器請求數據,因此減少不必要的數據請求,減少數據在瀏覽器和服務器間不必要地來回傳...

    Achilles 評論0 收藏0
  • 我的大前端- 收藏集 - 掘金

    摘要:下面圍繞的這樣的目的,即左右知乎網頁上屏幕截圖功能的實現前端掘金背景最近注意到知乎的屏幕截圖反饋功能,感覺非常不錯。正如你期望的,文中的闖關記之垃圾回收和內存管理前端掘金題圖來源,授權基于協議。 微信小程序實戰學習 起手式 DEMO 仿肯德基 - 前端 - 掘金小程序?大場景? 微信小程序本質上來說就是一個 HTML 5(移動網頁) 應用,用view、scoll-view代替了div標...

    LdhAndroid 評論0 收藏0

發表評論

0條評論

mtunique

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<