localStorage存储JSON数据

最新推荐文章于 2024-05-05 22:38:04 发布

原创最新推荐文章于 2024-05-05 22:38:04 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了JSON数据格式的特点及其在JavaScript中的使用方式，并详细讲解了如何利用HTML5的localStorage进行JSON数据的存储与读取。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.什麽是JSON
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等）。这些特性使JSON成为理想的数据交换语言。
想具体了解JSON，请链接：http://json.org/json-zh.html

二.JSON的格式
json数据虽然复杂多变，但它的格式也遵循一定的规则。js中明确规定了json的规则：（1）并列数据用（，）隔开；（2）映射使用(:)表示；（3）并列数据的集合（数组）用（[]）（4）并列映射的集合用（{}）表示。下面就看一个json的实例吧

var family={member:["father","mother","son"],city:'beijing',incoming:8000};

三.如何使用JSON

接下来我要说的是：如何取得json里面的值。其实很简单，就拿上面的json为例，要想取得mother这个值可以这样：family[member][1]或者family.member[1]。

四.什麽是localStorage

localStorage是html5的一种本地存储。localStorage存储的数据没有时间限制。可以永久的存储。localStorage有一些方法，例如setItem()，getItem()，removeItem()。

五.如何使用localStorage存取JSON

使用localStorage存取数据其实就用到了这些方法。下面看一下具体的方法。

将json存入localStorage中：

          var json={ name:"ww",phone:12345668} ; localStorage.setItem("person",JSON.stringify(json));

这样就把json存入了localStroage.person里。

如果取出localStroage里的数据，可以使用这样的方法：

         var person=JSON.parse(localStorage.getItem("person"));

这样就把json对象取出来使用了。

六.注意事项

值得注意的是，localStorage里存储的是字符串类型，所以json在存储的时候要先使用JSON.parse()方法将其转化为字符串，在取出json时使用JSON.parse()方法将其转化为对象。任何类型的数据在存储到localStroage里时都会被强制转化为字符串类型。