JavaScript操作localStorage实现保存本地json文件

 更新时间:2024年02月06日 09:09:12   作者:搬砖的诗人Z  
这篇文章主要为大家详细介绍了JavaScript如何操作localStorage实现保存本地json文件,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下

一、什么是localStorage

在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同。

二、localStorage的优势与局限

localStorage的优势

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

2、localStorage会可以将第一次请求的数据直接存储到本地,这个相当于一个5M大小的针对于前端页面的数据库,相比于cookie可以节约带宽,但是这个却是只有在高版本的浏览器中才支持的

localStorage的局限

1、浏览器的大小不统一,并且在IE8以上的IE版本才支持localStorage这个属性

2、目前所有的浏览器中都会把localStorage的值类型限定为string类型,这个在对我们日常比较常见的JSON对象类型需要一些转换

3、localStorage在浏览器的隐私模式下面是不可读取的

4、localStorage本质上是对字符串的读取,如果存储内容多的话会消耗内存空间,会导致页面变卡

5、localStorage不能被爬虫抓取到

localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储,而sessionStorage属于当会话结束的时候,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;
        }
        
        
        //更新小说最后阅读的章节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文件,小编还为大家整理了其他关于localStorage的使用,希望对大家有所帮助。

localStorage存取JOSN数据

		//创建localStorage对象
        var storage=window.localStorage;
        //创建数组
        var  persons = [];
        //存入对象
        persons.push({"name":"张三",age:23,'gender':true});
        persons.push({"name":"李四",age:23,'gender':true});
        persons.push({"name":"王五",age:23,'gender':true});
        //将个人信息用json的方法转换为字符串
        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不可用 
 } 

存储数据

// 获取本地存储对象 
var localStorage =window.localStorage; 
// 存储 
localStorage.setItem("key",content); 

取出数据

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

删除指定数据

localStorage.removeItem("key"); 

清空本地数据

localStorage.clear(); 

存储与读取json数据

// 定义json变量 
var json ={username:"杨朝来",sex:1,age:25,birthday:"1990-08-21",phonenumber:13812345678,disease:"肺小结节",insurance:1,avatar:"images/male.png"}; 
// json变量转化成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; 

到此这篇关于JavaScript操作localStorage实现保存本地json文件的文章就介绍到这了,更多相关JavaScript localStorage保存本地json内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 原生JavaScript实现五子棋游戏

    原生JavaScript实现五子棋游戏

    这篇文章主要为大家详细介绍了原生JavaScript实现五子棋游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-11-11
  • List Installed Software Features

    List Installed Software Features

    List Installed Software Features...
    2007-06-06
  • Web前端JavaScript中findIndex方法使用示例

    Web前端JavaScript中findIndex方法使用示例

    这篇文章主要介绍了Web前端JavaScript中findIndex方法使用的相关资料,findIndex() 返回第一个符合条件的数组子项的下标,找到符合条件的之后就不在继续遍历,需要的朋友可以参考下
    2025-08-08
  • JS apply用法总结和使用场景实例分析

    JS apply用法总结和使用场景实例分析

    这篇文章主要介绍了JS apply用法总结和使用场景,结合实例形式分析了JS apply的基本功能、原理、使用方法及操作注意事项,需要的朋友可以参考下
    2020-03-03
  • 基于JavaScript实现淘宝商品广告效果

    基于JavaScript实现淘宝商品广告效果

    这篇文章主要为大家详细介绍了基于JavaScript实现淘宝商品广告效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • javascript实现任务栏消息提示的简单实例

    javascript实现任务栏消息提示的简单实例

    下面小编就为大家带来一篇javascript实现任务栏消息提示的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • electron实现图片的另存为功能

    electron实现图片的另存为功能

    本文主要介绍了在electron中如何实现图片的另存为操作,包括另存为按钮事件的编写,getImageType和saveAsPicture的主要代码,以及Electron进程与渲染进程的交互效果,希望能为使用electron的开发者提供帮助
    2024-10-10
  • 原生javascript制作的拼图游戏实现方法详解

    原生javascript制作的拼图游戏实现方法详解

    这篇文章主要介绍了原生javascript制作的拼图游戏实现方法,结合实例形式详细分析了JavaScript制作拼图游戏的相关步骤、原理、实现方法及相关操作注意事项,需要的朋友可以参考下
    2020-02-02
  • Js 导出table内容到Excel的简单实例

    Js 导出table内容到Excel的简单实例

    在做前端开发时,常常会用到通过js把数据导入到excel的功能,现在给出给简单demo代码,以供以后使用
    2013-11-11
  • JavaScript将Web页面内容导出到Word及Excel的方法

    JavaScript将Web页面内容导出到Word及Excel的方法

    这篇文章主要介绍了JavaScript将Web页面内容导出到Word及Excel的方法,涉及javascript操作ActiveXObject控件的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02

最新评论