JavaScript操作localStorage实现保存本地json文件
作者：搬砖的诗人Z
一、什么是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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！