嘿，各位！想了解怎么把东西放进浏览器里的记忆盒吗？ 就是那个地方的 localStorage 啊！ 如果你想让你的网页记住用户的数据， 比如他们上次访问时设置的偏良好设置、或者他们刚刚添加的笔记等等，那么 localStorage 就派上用场了。 别担心，我保证我尽量用最简洁的方式来阐述当前这个东西。 不过我得说这玩意儿有可能有点奇怪，但只要你跟着我的步骤一步一步来就没问题！

哪些是 localStorage？

我懂了。 先来看，咱们得搞清楚 localStorage 是啥。 想象一下你有一个较小较小的笔记本电脑，能够用来记录一些信息。 localStorage 就像当前这个笔记本电脑一样！ 它存储的是键值对：键和值。 你能够用一个名字来标记你想要保存的信息，然后把信息本身放到笔记本里。 这一些信息会在用户的浏览器打开之后就一直存在直到用户自己把它删掉。

但是！localStorage 只能存储字符串类型的数据。 也就是说如果你想保存一个数字、一个日期或者一个繁杂的对象，你就得先把它变成字符串再放进去。

为哪些要正确添加崭新对象？

很更多人有可能以为简洁地把崭新的对象“覆盖”到现有的数据里就能够了。 但实际情况是这样做会带来很更多问题！ 比如：，精神内耗。

• 数据丢失： 如果你每次都覆盖现有数据，那么每次你添加崭新对象的时候都会丢失之前的历史持续发展记录。 这可不是良好事儿！
• 杂乱： 变得非常杂乱。

我们都经历过... 所以啊， 正确的做法是：先读取现有的数据，然后把崭新的对象添加到现有的数据里；最后再来看再把更崭新后的数据保存回去。

详细步骤：一步一步搞定

说白了就是... 良好了当前我们启动实际操作吧! 我会给你提供给一个简洁的例子。

1. 读取现有的数据

往白了说... "读取"意味着我们先看看localStorage里面有没有已经保存的数据。“userNote” 当前这个键对应着我们的笔记内容。 如果没有的话…我们就创建一个空的数组。

) || 

对，就这个意思。 `` 函数在这里的作用是判断 `` 有没有返回 `null` 。如果返回 `null` ， 则采用 `|| ` 来创建一个空数组 `` ，赋值给 `notesObj` 变量。

2. 创建崭新的对象

接下来我们需要创建我们要添加的崭新对象。“myObj” 当前这个变量代表着我们要添加到localStorage里的崭新笔记信息，我们一起...。

 = { title: , note: , }

3. 将崭新对象添加到数组

当前关键来了！ 我们需要把创建良好的“myObj” 添加到“notesObj” 数组里。“push” 方法就是用来往数组里添加元素的，太离谱了。！

;

"setItem" 方法是用来把数据存储回 localStorage 的。“userNote” 是我们想要保存的键，“notesObj” 是我们要存储的值。，从头再来。。

);