您的位置 >>> 星想互聯 >>> 編程技術 >>> JQUERY+JS
本地存儲localStorage
點擊數:192  發布時間2020-03-22 19:28:17

localStorage會可以將第一次請求的數據直接存儲到本地,這個相當于一個5M大小的針對于前端頁面的數據庫。

 

注意:在IE8以上的IE版本才支持localStorage這個屬性。localStorage屬于永久性存儲,如果存儲內容多的話會消耗內存空間,會導致頁面變卡。

 

具體使用方式如下:

localStorage - 沒有時間限制的數據存儲

var arr=[1,2,3];

localStorage.setItem("temp",arr);   //存入 參數:1.調用的值 2.所要存入的數據

console.log(localStorage.getItem("temp"));//輸出

 

清空localStorage

localStorage.clear(); //

刪除鍵值對

localStorage.removeItem("arr");

注意:存入的數據只能以字符串形式存入。

 

下面是關于localStorage的簡單使用:

localStorage.a = 3;//設置a"3"

localStorage["a"] = "sfsf";//設置a"sfsf",覆蓋上面的值

localStorage.setItem("b","isaac");//設置b"isaac"

var a1 = localStorage["a"];//獲取a的值

var a2 = localStorage.a;//獲取a的值

var b = localStorage.getItem("b");//獲取b的值

localStorage.removeItem("c");//清除c的值

 

 

localStorage提供轉JOSN數據方法:

//JSON對象轉JSON字符串

var obj = {"a": 1,"b": 2};

obj = JSON.stringify(obj); //轉化為JSON字符串

localStorage.setItem("temp2", obj);

 

//JSON字符串轉JSON對象

obj=JSON.parse(localStorage.getItem("temp2"));

 

 

【案例】本地排序

以姓名,成績,當前時間存入本地存儲,然后按成績從高到低排序

// 對象數據

   <script>

    var data = [

        { 'name': '段松', 'score': '100', 'time': '2020-3-20 11:50:21' },

        { 'name': '馬云', 'score': '89', 'time': '2020-3-20 11:50:21' },

        { 'name': '馬化騰', 'score': '94', 'time': '2020-3-20 11:50:21' },

    ]

     data = [...data,

        { 'name': '雷軍', 'score': '99', 'time': '2020-3-20 11:50:21' },

        { 'name': '求伯君', 'score': '73', 'time': '2020-3-20 11:50:21' },

        { 'name': '羅永浩', 'score': '59', 'time': '2020-3-20 11:50:21' }

    ]

 

    // 把對象轉換為字符串格式 進行存儲

    var data = JSON.stringify(data);

    localStorage.setItem('info', data);

 

    // 將本地存儲數據取出,并轉換為對象

    var info = JSON.parse(localStorage.getItem('info'));

 

    info.sort(function (a, b) {

        return a.score - b.score

    })

    console.log(info);

</script>


來源:咸寧網站建設
【上一篇】FormData對象
【下一篇】H5拖放
日本高清成 人,A级高清毛片av无码,欧美成 人 免费在线播放-首页 <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>