html5本地存储localStorage

最新推荐文章于 2023-02-22 21:42:56 发布

xieZ

最新推荐文章于 2023-02-22 21:42:56 发布

阅读量456

点赞数 2

CC 4.0 BY-SA版权

文章标签： localStorage

本文链接：https://blog.youkuaiyun.com/qq_33316091/article/details/77091810

本文介绍如何使用WebStorage在客户端存储数据，包括设置、查询及删除数据等操作，并提供了示例代码。文章展示了如何利用localStorage进行数据管理，适用于前端开发者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>本地存储 Web Storage</title>
<script type="text/javascript">
window.onload=function(){
//建议限制容量5M以内【cookie限制容量是4k(1M=1024k)】
//(Chrome浏览器)存储路径 C:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Default\Local Storage
if(!window.localStorage){
document.querySelector('#support_status').innerHTML="不支持 localStorage";
return false;
}

//清空数据
localStorage.clear();

//插入数据 setItem(key,value)
localStorage.setItem(123,"xiez");//插入第1条数据
localStorage.setItem(4566,"hello");//插入第2条数据

//删除单个数据 removeItem(key)
//localStorage.removeItem(123);

//查询数据
var data = "";
for(var i=0;i<localStorage.length;i++){
var number = localStorage.key(i);//key(索引) 通过索引获取key值
var name = localStorage.getItem(number);//getItem(key) 通过key获取value值

data += name+" : "+number+"<br/>";
document.querySelector('#get_data').innerHTML=data;

}

</script>
</head>
<body>
<p id="support_status"></p>
<p id="get_data"></p>
</body>
</html>