初识localStorage&localStorage的注意事项
初识localStorage
1.localStorage是什么
localStorage 也是一种浏览器存储数据的方式（本地存储），它只是存储在本地，不会发送到服务器端
单个域名下的localStorage总大小有限制
2.在浏览器中操作localStorage
3.localStorage的基本用法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>初始localStorage</title> </head> <body> <script> //console.log(localStorage) //setItem（）存储数据 localStorage.setItem('username','lyw'); localStorage.setItem('username','yth'); localStorage.setItem('age',18); localStorage.setItem('sex','nv'); //length //console.log(localStorage.length) //getItem /* console.log(localStorage.getItem('username')); console.log(localStorage.getItem('age')); console.log(localStorage.getItem('sex')); */ //获取不存在的返回null console.log(localStorage.getItem('name')); //console.log(localStorage); //removeItem /* localStorage.removeItem('username'); localStorage.removeItem('age'); //删除不存在的key，不报错 localStorage.removeItem('name'); */ //clear（） localStorage.clear(); console.log(localStorage) </script> </body></html> |
localStorage实现自动填充
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>初始localStorage</title>
</head>
<body>
<script>
//console.log(localStorage)
//setItem（）存储数据
localStorage.setItem('username','lyw');
localStorage.setItem('username','yth');
localStorage.setItem('age',18);
localStorage.setItem('sex','nv');
//length
//console.log(localStorage.length)
//getItem
/* console.log(localStorage.getItem('username'));
console.log(localStorage.getItem('age'));
console.log(localStorage.getItem('sex')); */
//获取不存在的返回null
console.log(localStorage.getItem('name'));
//console.log(localStorage);
//removeItem
/* localStorage.removeItem('username');
localStorage.removeItem('age');
//删除不存在的key，不报错
localStorage.removeItem('name'); */
//clear（）
localStorage.clear();
console.log(localStorage)
</script>
</body>
</html>
localStorage的注意事项
1.localStorage的存储期限
localStorage是持久化的本地存储，除非手动清除（比如通过js删除，或者清除浏览器缓存），否则数据是永远不会过期的
sessionStorage（用法和localStorage一样只不过sessionStorage是会话存储）
当会话结束（比如关闭浏览器）的时候，sessionStorage中的数据会被清空
2.localStorage 键和值的类型
localStorage存储的是键和值只能是字符串类型
不是字符串类型，也会转化成字符串类型再存进去
3.不同域名下能否共用localStorage
不同域名是不能共用localStorage的
4.localStorage的兼容性
IE7及以下版本不支持localStorage，IE8 开始支持
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本