1.什么是localStorage
咱们聊聊怎么用HTML5来存取JSON数据前，先得明白啥叫localStorage。这个就是HTML5给出来的一个方便的客户端存数据的办法，只要用户关掉浏览器再开，你之前存的那些东西都还在那儿。所以对网页应用来说，它就成为了一个好用的本地存数据的选择。
2. localStorage的局限性
虽然localStorage好用，但是它只能存字符串，如果我们要存JavaScript对象比如JSON形式的数据，就不能直接用它来存。这时候，我们就要把它们变成字符串格式才能存进去。
3. JSON对象转换成字符串
想把JSON对象变成字符串的话，就用JSON.stringify()这个办法！它能把JavaScript值变得像JSON字符串一样好看。举个例子，假设你有个含有用户信息的JSON对象：
javascript 让我们来聊聊用户，这个人叫Alice，30岁了，住在纽约。 把用户的数据变成JSON字符串，就是这么简单！
用JSON.stringify(user)这招儿,就能弄出个用户信息的字符串！
4.使用localStorage存储JSON数据
var jsonData = {'name': '张三', 'age': 29}; // 定义一个JSON对象
var str_jsonData = JSON.stringify(jsonData);
console.log(typeof(str_jsonData)); // string
localStorage.setItem('localData', str_jsonData); // 存储字符串数据到本地
var getLocalData = localStorage.getItem('localData'); // 读取字符串数据
console.log(typeof(getLocalData)); // string
var jsonObj = JSON.parse(getLocalData);
console.log(typeof(jsonObj)); // obj
console.log(jsonObj.age); // 29
好！我们现在把JSON对象变成字符串了，就能用localStorage保存咯。简单来说，就是通过localStorage.setItem()这个方法，把字符串数据像放调料架上那样，放在浏览器里。
本地存储中加入用户信息，设置为 jsonString。
这么搞的话，把’userInfo’当作钥匙，用户信息的JSON文本就能乖乖地待在本地存储里！
5.从localStorage读取JSON数据
想要拿回以前存的JSON数据，就用那个名叫 localStorage.getItem()的函数，很容易就能找到要用的数值了！
直接把”用户信息”这个本地存储的值读出来，存到变量storedJsonString里。
搞定！现在我们已经可以轻松从localStorage拿到保存过的用户资料。
6.字符串转换成JSON对象
你从本地存储那拿到个JSON串儿？想要变回原来那个JavaScript对象么？没问题，用JSON.parse()这个方法就行了！
先把储存的json字符串转成对象，用户信息就好找了。
搞定！我们已经把存储的json字符串咋们的变量storedJsonString 转为用户信息的原始 JavaScript 对象 userInfoObject了！
7.实际应用场景
像咱们在编程的时候，很可能就得把那些比如用户的配置，程序设定什么的搞到电脑里去。这时候，用上 localStorage 和 JSON，把这些东西存在电脑上又方便又好用。
8.总结与展望
这儿有个在 HTML5 里用 localStorage 存取 JSON 的教程。虽然 localStorage 只能保存字符串，但是有 JSON.stringify()和 JSON.parse()，咱们就可以处理各种复杂数据，这样对网页速度和用户体验都有好处！对于开发者来说也是多了不少发挥的空间哈。
希望这篇文章能帮你更深入了解和运用HTML5中的localStorage功能以及如何简单有效地处理JSON数据，进一步挖掘Web开发的乐趣和实用技巧。
评论0