JavaScript 如何做本地存储

你有没有过这样的经历：在购物网站上选了几件商品，关掉页面再打开，购物车里的东西居然还在；或者在在线笔记里写了半篇文章，不小心关了浏览器，再打开时内容还能恢复——这些“能把数据存在浏览器里下次再用”的功能，背后大多用到了前端的本地存储技术。JavaScript作为网页的“灵魂”，就是实现这个功能的核心工具。

什么是JavaScript本地存储？

简单说，就是把数据存在用户的浏览器里，而不是存在网站的服务器上。就像你把重要的小物件放在自己的随身包里，而不是每次都要回仓库取——用的时候拿出来，不用就放在原地，不会因为关闭网页、刷新页面就消失。而且这些数据是“专属”的，每个网站只能访问自己存的内容，不会和其他网站的混在一起，安全性也有保障。

最常用的两种本地存储方式

JavaScript里常用的本地存储有两种，用法很像，适用场景却不同。

第一种是localStorage，可以理解成“永久储物柜”。只要你不主动删除，就算关掉浏览器、甚至重启电脑，数据也会一直存在。比如很多网站的“记住登录状态”功能，就是用localStorage存了你的登录令牌，下次打开网站不用重新输入密码。举个例子：你在浏览器控制台里输入代码，把“喜欢的颜色”存成red，就算关掉浏览器第二天再打开，这个颜色还是能取出来用。

第二种是sessionStorage，相当于“临时寄存柜”。它的数据只在当前浏览器标签页有效，只要你关掉标签页，数据就会消失。适合存那种“只需要当前用、不用留到下次”的内容，比如你在一个网页里填了一半的表单，暂时切去另一个页面，这时候用sessionStorage存表单内容，切回来还能接着填，要是关掉标签页，就算没填完的内容也不用再担心泄露，很安全。

本地存储的基本操作，其实超简单

不管是localStorage还是sessionStorage，用法都只有三步：存数据、取数据、删数据，就像你往柜子里放东西、拿东西、扔东西一样。

比如存数据，就像把“苹果”放进柜子标好“水果”，代码就是localStorage.setItem('key', 'value')——key是你给数据起的名字，value是要存的内容。取数据就是找“水果”这个标签，拿出苹果，代码是localStorage.getItem('key')。要是想把“水果”这个东西扔掉，就用localStorage.removeItem('key')。

举个生活化的例子：你在做一个待办清单网站，用户加了“买牛奶”的任务，你就用localStorage.setItem('todo_1', '买牛奶')把这个任务存起来，刷新页面后，用localStorage.getItem('todo_1')就能把任务取出来，继续显示在页面上。

用本地存储要注意的小细节

虽然好用，但也有几个小坑要避开。首先，存的内容只能是字符串，要是想存数字或者对象，得先转成字符串，取出来再转回去——就像你要把玩具放进储物柜，得先装成盒子（字符串），拿出来再拆开玩。其次，本地存储的空间有限，一般每个网站只有5MB左右，不能存太多视频、图片这种大文件，不然会存不下。最后，不同浏览器的本地数据是不互通的，你在Chrome里存的数据，换Edge浏览器就找不到了。

现在你再遇到购物车没清空、笔记内容没丢失的情况，就知道背后是怎么回事了——JavaScript用本地存储把数据留在了你的浏览器里，让网页变得更顺手。下次做自己的小网站时，也可以试着用这个功能，给用户省点重复操作的麻烦。