📜  js 从本地存储中获取数组对象 - Javascript (1)

📅  最后修改于: 2023-12-03 15:32:22.413000             🧑  作者: Mango

JavaScript:从本地存储中获取数组对象

在前端开发中,我们经常需要使用本地存储来保存用户的数据。本地存储可以帮助我们在浏览器关闭后保存数据,使得用户下次访问时可以直接读取数据,提升用户体验。本地存储支持多种类型的数据存储,包括字符串、数字、布尔值等,还可以存储数组和对象。本篇文章将介绍如何在 JavaScript 中从本地存储中获取数组对象。

localStorage 和 sessionStorage

在 HTML5 中,浏览器提供了两种类型的本地存储:localStorage 和 sessionStorage。

localStorage

localStorage 是一个对象,它允许你在浏览器中存储键值对。localStorage 的数据可以一直保留在客户端直到用户清除。localStorage 存储的数据是没有时间限制的。

sessionStorage

sessionStorage 与 localStorage 非常相似,但是 sessionStorage 存储的数据在浏览器关闭后会被清除。sessionStorage 的数据只能在同一个窗口或标签页中共享。

存储数组对象

在 JavaScript 中,我们可以使用 JSON.stringify() 方法将数组对象转换成字符串,然后使用 localStorage.setItem() 或 sessionStorage.setItem() 方法将其存储到本地存储中。

let myArray = [{name:'张三', age:18}, {name:'李四', age:20}];
let jsonString = JSON.stringify(myArray);
localStorage.setItem('myArray', jsonString);
从本地存储中获取数组对象

我们可以使用 localStorage.getItem() 或 sessionStorage.getItem() 方法获取存储在本地存储中的数据。获取到的数据是字符串形式的,需要使用 JSON.parse() 方法将其转换成数组对象。

let jsonString = localStorage.getItem('myArray');
let myArray = JSON.parse(jsonString);
console.log(myArray); // [{name:'张三', age:18}, {name:'李四', age:20}]

以上就是从本地存储中获取数组对象的方法,我们可以根据实际需求选择 localStorage 或 sessionStorage 来存储数据。