1. 程式人生 > >前端學習歷程--localstroge

前端學習歷程--localstroge

限定 輸出 storage alt json 是否 特性 讀取 set

一、 localstorage的特性

1、需要ie8+

2、瀏覽器中都會把localStorage的值類型限定為string類型,這個在對我們日常比較常見的JSON對象類型需要一些轉換

3、localStorage本質上是對字符串的讀取,如果存儲內容多的話會消耗內存空間,會導致頁面變卡

4、localStorage不能被爬蟲抓取到

二、localstorage使用規則

1、判斷是否支持localStorage

技術分享

2、localStorage的三種寫入方法

技術分享技術分享

在控制臺中:技術分享

因為localStorage只支持string類型的存儲

3、localStorage的使用也是遵循同源策略的,所以不同的網站直接是不能共用相同的localStorage

4、localStorage的讀取方法

技術分享

5、localStorage的修改方法

if(!window.localStorage){
            alert("瀏覽器支持localstorage");
        }else{
            var storage=window.localStorage;
            //寫入a字段
            storage["a"]=1;
            //寫入b字段
            storage.b=1;
            //寫入c字段
            storage.setItem("c",3);
            console.log(storage.a);
            // console.log(typeof storage["a"]);
            // console.log(typeof storage["b"]);
            // console.log(typeof storage["c"]);
            /*分割線*/
            storage.a=4;
            console.log(storage.a);
        }

6、localStorage的刪除方法

var storage=window.localStorage;
            storage.a=1;
            storage.setItem("c",3);
            console.log(storage);
            storage.clear();//清除所有
            console.log(storage);

var storage=window.localStorage;                
            storage.a=1;
            storage.setItem("c",3);
            console.log(storage);
            storage.removeItem("a");//清除某個鍵值對
            console.log(storage.a);

技術分享

7、localStorage的鍵獲取

var storage=window.localStorage;
            storage.a=1;
            storage.setItem("c",3);
            for(var i=0;i<storage.length;i++){
                var key=storage.key(i);//使用key()方法遍歷索引
                console.log(key);
            }

8、將JSON轉換成為JSON字符串

if(!window.localStorage){
            alert("瀏覽器支持localstorage");
        }else{
            var storage=window.localStorage;
            var data={
                name:‘xiecanyong‘,
                sex:‘man‘,
                hobby:‘program‘
            };
            var d=JSON.stringify(data);
            storage.setItem("data",d);
            console.log(storage.data);
        }
讀取之後要將JSON字符串轉換成為JSON對象,使用JSON.parse()方法
var storage=window.localStorage;
            var data={
                name:‘xiecanyong‘,
                sex:‘man‘,
                hobby:‘program‘
            };
            var d=JSON.stringify(data);
            storage.setItem("data",d);
            //將JSON字符串轉換成為JSON對象輸出
            var json=storage.getItem("data");
            var jsonObj=JSON.parse(json);
            console.log(typeof jsonObj);

技術分享

9、判斷localStorage是否已滿

一般為5m,技術分享可檢測當前已使用大小

而1m=1048576b











前端學習歷程--localstroge