localStorage本地存储怎么用？前端把数据存进浏览器小白教程

很多刚学前端的小伙伴都会遇到一个问题：网页一刷新，刚填的内容就没了。想让浏览器记住点东西——比如用户的用户名、购物车、或者一个深色模式开关——该怎么办？答案就是localStorage本地存储。它是浏览器自带的一块小仓库，不用后端、不用数据库，几行JavaScript就能把数据存进用户的浏览器里。这篇文章老陈带你从零搞懂它，并写一个能记住用户名的实战小例子。

一、localStorage到底是什么

简单说，localStorage是HTML5提供的一种浏览器本地存储机制。它有两个特点特别适合新手：一是持久化，只要用户不主动清缓存，存进去的数据关掉浏览器、重启电脑都还在；二是同源隔离，不同网站之间互不干扰，A站存的东西B站读不到，安全放心。

和它容易混淆的还有sessionStorage，区别只在一个「寿命」：sessionStorage关掉标签页就清空，localStorage长期保留。本文讲的是更常用的localStorage。

二、三个核心方法先记牢

localStorage的API极其简单，就三个方法，背下来就能用：

• setItem(键, 值)：把一条数据存进去，键和值都是字符串。
• getItem(键)：按键把数据取出来，取不到返回null。
• removeItem(键)：删除指定的一条数据。

另外还有clear()可以一次性清空全部，新手慎用，别不小心把用户数据全抹了。

三、实战：记住用户名的输入框

下面这个小例子，用户第一次输入名字并提交，下次打开页面名字还在，不用重新填：

// 页面加载时，尝读取已保存的名字
var savedName = localStorage.getItem('username');
if (savedName) {
  document.getElementById('nameInput').value = savedName;
}

// 用户点击保存时，写进本地存储
function saveName() {
  var name = document.getElementById('nameInput').value;
  localStorage.setItem('username', name);
  alert('已记住你啦：' + name);
}

把这段代码和你的输入框、按钮一绑，刷新页面名字依旧在，是不是很有成就感？这就是本地存储最直观的用处。

四、新手最容易踩的3个坑

• 只存字符串：localStorage不认对象，想存JSON得先用JSON.stringify转成字符串，读取时再JSON.parse还原。
• 容量有限：每个域名大约只有5MB，别拿它存大文件或大量日志，满了会报错。
• 隐私敏感别存：账号密码、身份证这类信息绝不能放localStorage，它明文存在本地，谁都能看到。

老陈总结

localStorage是前端入门必须掌握的一项基础能力，理解了「存、取、删」三板斧，你就能做出记住用户偏好的小功能。老陈建议你现在就打开浏览器按F12，切到Console（控制台）里敲几句：localStorage.setItem('test','hello')，再getItem('test')看看返回什么。亲手试一遍，比看十遍都管用。