JavaScript操作localStorage實現(xiàn)保存本地json文件

更新時間：2024年02月06日 09:09:12 作者：搬磚的詩人Z

這篇文章主要為大家詳細介紹了JavaScript如何操作localStorage實現(xiàn)保存本地json文件,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下

一、什么是localStorage

在HTML5中，新加入了一個localStorage特性，這個特性主要是用來作為本地存儲來使用的，解決了cookie存儲空間不足的問題(cookie中每條cookie的存儲空間為4k)，localStorage中一般瀏覽器支持的是5M大小，這個在不同的瀏覽器中l(wèi)ocalStorage會有所不同。

二、localStorage的優(yōu)勢與局限

localStorage的優(yōu)勢

1、localStorage拓展了cookie的4K限制

2、localStorage會可以將第一次請求的數(shù)據(jù)直接存儲到本地，這個相當于一個5M大小的針對于前端頁面的數(shù)據(jù)庫，相比于cookie可以節(jié)約帶寬，但是這個卻是只有在高版本的瀏覽器中才支持的

localStorage的局限

1、瀏覽器的大小不統(tǒng)一，并且在IE8以上的IE版本才支持localStorage這個屬性

2、目前所有的瀏覽器中都會把localStorage的值類型限定為string類型，這個在對我們?nèi)粘１容^常見的JSON對象類型需要一些轉(zhuǎn)換

3、localStorage在瀏覽器的隱私模式下面是不可讀取的

4、localStorage本質(zhì)上是對字符串的讀取，如果存儲內(nèi)容多的話會消耗內(nèi)存空間，會導致頁面變卡

5、localStorage不能被爬蟲抓取到

localStorage與sessionStorage的唯一一點區(qū)別就是localStorage屬于永久性存儲，而sessionStorage屬于當會話結(jié)束的時候，sessionStorage中的鍵值對會被清空

三、使用localStorage保存本地json文件

/***************** 操作本地文件 *****************/
        //保存圖書本地json
        function SaveLocalJson(data){
            localStorage.setItem("MyBook",data);
        }
        
        //查詢所有保存本地json
        function GetLocalJson(){
            var readtext=localStorage.getItem("MyBook");
            var readJson=JSON.parse(readtext);
            return readJson;
        }
        
        
        //更新小說最后閱讀的章節(jié)Id
        function UpdateLocalLastRead(novelId,lastReadId){
            var readtext=localStorage.getItem("MyBook");
            var readJson=JSON.parse(readtext);
            var count = Object.keys(readJson).length; 
            for(i=0;i<count;i++)
            {
                if(readJson[i].NovelId==novelId){
                    readJson[i].LastReadId=lastReadId;
                }
            }
            var jsontext= JSON.stringify(readJson);
            SaveLocalJson(jsontext);
        }
        
        //刪除本地保存圖書
        function RemoveMyBook(){
            localStorage.removeItem("MyBook");
        }
        /***************** end *****************/

四、知識補充

除了保存本地JSON文件，小編還為大家整理了其他關(guān)于localStorage的使用，希望對大家有所幫助。

localStorage存取JOSN數(shù)據(jù)

		//創(chuàng)建localStorage對象
        var storage=window.localStorage;
        //創(chuàng)建數(shù)組
        var  persons = [];
        //存入對象
        persons.push({"name":"張三",age:23,'gender':true});
        persons.push({"name":"李四",age:23,'gender':true});
        persons.push({"name":"王五",age:23,'gender':true});
        //將個人信息用json的方法轉(zhuǎn)換為字符串
        var s = JSON.stringify(persons);
        storage.setItem("message",s);

        //取出個人信息
        var json = localStorage.getItem("message")
        //將個人信息從一個字符串中解析出json對象
        var jsonObj = JSON.parse(json);
        console.log(json);
        /*[{"name":"張三","age":23,"gender":true},
        {"name":"李四","age":23,"gender":true},
        {"name":"王五","age":23,"gender":true}]*/
        for (var i =  0 ; i < jsonObj.length ; i++){
            console.log(jsonObj[i]);
            /*{name: "張三", age: 23, gender: true}
            {name: "李四", age: 23, gender: true}
            {name: "王五", age: 23, gender: true}*/
            var person = jsonObj[i];
            for (var message in person){
                console.log(person[message])
                /*張三
                  23
                  true*/
            }
        }

判斷本地存儲是否可用

if(window.localStorage) { 
 // localStorge可用 
 }else { 
// localStorge不可用 
 }

存儲數(shù)據(jù)

// 獲取本地存儲對象 
var localStorage =window.localStorage; 
// 存儲 
localStorage.setItem("key",content);

取出數(shù)據(jù)

var myKey =localStorage.getItem("key");

刪除指定數(shù)據(jù)

localStorage.removeItem("key");

清空本地數(shù)據(jù)

localStorage.clear();

存儲與讀取json數(shù)據(jù)

// 定義json變量 
var json ={username:"楊朝來",sex:1,age:25,birthday:"1990-08-21",phonenumber:13812345678,disease:"肺小結(jié)節(jié)",insurance:1,avatar:"images/male.png"}; 
// json變量轉(zhuǎn)化成json字符串 
var jsonstr =JSON.stringify(json); 
// 存儲json字符串 
window.localStorage.setItem("jsonkey",jsonstr); 
// 取出json字符串 
var jsonstr =window.localStorage.getItem("jsonkey"); 
// 還原json對象 
var json =JSON.parse(jsonstr); 
// 取出json里面的username 
var username =json.username;

到此這篇關(guān)于JavaScript操作localStorage實現(xiàn)保存本地json文件的文章就介紹到這了,更多相關(guān)JavaScript localStorage保存本地json內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: