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对象的四种创建方法，首先我们通过确定一个对象的属性和方法展开主题相关内容，需要的小伙伴可以参考一下2022-08-08
这篇文章主要为大家详细介绍了微信小程序单选框组应用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要介绍了JS实现数组去重及数组内对象去重功能,结合实例形式分析了ES5与ES6两种版本针对数组去重的相关操作技巧,需要的朋友可以参考下2019-02-02
这篇文章主要介绍了JavaScript 随机验证码的生成实例代码的相关资料,需要的朋友可以参考下2016-09-09
今天小编就为大家分享一篇Layui组件Table绑定行点击事件和获取行数据的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
SOSO地图想必大家都知道吧，本文将为大家详细介绍下使用JS画出标注和中心点,直接贴出代码，感兴趣的朋友可以参考下2013-08-08
这篇文章主要介绍了JavaScript async/await原理及实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-12-12
这篇文章主要介绍了layui框架中layer父子页面交互的方法,结合实例形式分析了layer父子页面交互的常用技巧以及layer弹出多个iframe找到父页面的操作方法,需要的朋友可以参考下2017-11-11
我们在开发的过程中一定常常发现const关键字定义的简单类型变量不可以改变,但是你如果定义的是一个复杂类型变量（比如对象）的话对里面属性的增删改查是可以的,那这又是为什么呢,接下来就来和小编一起探讨一下吧2023-11-11
这篇文章主要介绍了NestJs使用Mongoose对MongoDB操作的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-02-02
最新评论