前端利用localStorage把配置信息存储到本地的方法 亲测可用

前端开发如何把配置信息存储到本地？这是切图网qietu.com在做的一个前端项目中遇到的，需要用到的是js的存储方法localStorage，它主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题，localStorage的数据是持久存储在用户的硬盘上的,而不是内存，在数据存储方便比session和cookie要更加好用。

现在前端做数据存储，跨页面传值，localStorage是一个很好的方式，以键值对的方式存储，也方便取值赋值。使用getItem()方法可以访问到存在浏览器 localStorage 中的数据对象,它以 key 作为参数,并且返回与 key 相对应的 value。

结合到实际项目中效果不错，附代码：

var jsonArray = [{
"id":"sys-xmbh",
"show":true,
"isSys":true
}
,{
"id":"sys-xmmc",
"show":true,
"isSys":true
}
];
/*=====js 如果有本地存储就调取本地存储 没有 就调取一段默认json=====*/

function getData(){
// 本地存储的键名
var storageKey = "myData";

// 尝试从本地存储中获取数据
var storedData = localStorage.getItem(storageKey);

// 检查本地存储是否有值
// if (storedData) {
// // 解析JSON字符串为对象
// storedData = JSON.parse(storedData);
// } else {
// // 没有本地存储，使用默认的JSON对象
// storedData = jsonArray;
// }
return storedData ? JSON.parse(storedData) : jsonArray;
}

var storedData = getData();
// 使用获取到的数据
console.log(storedData);

 

/*****==========修改数据 保存============****/

var storedData = getData();
// 要修改name为'Bob'的对象的age值为35
var updatedArray = storedData.map(item => {
if (item.id === id) {
return { ...item, show: data.elem.checked }; // 使用展开运算符复制当前对象，并修改age属性
}
return item; // 对不需要修改的对象保持原样
});
console.log(updatedArray);

// 将JSON对象转换为字符串
var jsonString = JSON.stringify(updatedArray);
// 存储到localStorage
localStorage.setItem("myData", jsonString);

// 从localStorage中检索
//var retrievedString = localStorage.getItem("myData");

// 将字符串转换回JSON对象
//var retrievedObject = JSON.parse(retrievedString);

//console.log(retrievedObject);

/**========清除数据====*/

localStorage.removeItem('myData');

切图网-我的前端外包首选。

标签：localStorage, 本地存储