快捷導(dǎo)航

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

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

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

一、什么是localStorage

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

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

localStorage的優(yōu)勢(shì)

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

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

localStorage的局限

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

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

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

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

5、localStorage不能被爬蟲(chóng)抓取到

localStorage與sessionStorage的唯一一點(diǎn)區(qū)別就是localStorage屬于永久性存儲(chǔ)，而sessionStorage屬于當(dāng)會(huì)話結(jié)束的時(shí)候，sessionStorage中的鍵值對(duì)會(huì)被清空

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

/***************** 操作本地文件 *****************/
        //保存圖書(shū)本地json
        function SaveLocalJson(data){
            localStorage.setItem("MyBook",data);
        }
        
        //查詢所有保存本地json
        function GetLocalJson(){
            var readtext=localStorage.getItem("MyBook");
            var readJson=JSON.parse(readtext);
            return readJson;
        }
        
        
        //更新小說(shuō)最后閱讀的章節(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);
        }
        
        //刪除本地保存圖書(shū)
        function RemoveMyBook(){
            localStorage.removeItem("MyBook");
        }
        /***************** end *****************/

四、知識(shí)補(bǔ)充

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

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

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

        //取出個(gè)人信息
        var json = localStorage.getItem("message")
        //將個(gè)人信息從一個(gè)字符串中解析出json對(duì)象
        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*/
            }
        }

判斷本地存儲(chǔ)是否可用

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

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

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

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

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

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

localStorage.removeItem("key");

清空本地?cái)?shù)據(jù)

localStorage.clear();

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

// 定義json變量 
var json ={username:"楊朝來(lái)",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); 
// 存儲(chǔ)json字符串 
window.localStorage.setItem("jsonkey",jsonstr); 
// 取出json字符串 
var jsonstr =window.localStorage.getItem("jsonkey"); 
// 還原json對(duì)象 
var json =JSON.parse(jsonstr); 
// 取出json里面的username 
var username =json.username;

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

您可能感興趣的文章: