HTML5 本地储存 localStorage 案例

最新推荐文章于 2023-03-08 15:51:46 发布

静静香甜

最新推荐文章于 2023-03-08 15:51:46 发布

阅读量282

点赞数

分类专栏： html5 javascript 文章标签： html5 javascript

本文链接：https://blog.csdn.net/qq_23663693/article/details/108081855

版权

javascript 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

html5

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
   var json={
       username:"tjj",
       password:"123456"
   };

   function setItem(){
       //单个值存储
       window.localStorage.setItem("username","tjj");

       //以json 形式储存用户名和密码
       window.localStorage.setItem("userInfo",JSON.stringify(json));
   }
   function getItem(){
       //获取单个值
       var username = window.localStorage.getItem("username");
       alert(username);

       //获取用户名和密码
       var userInfo = JSON.parse(window.localStorage.getItem("userInfo"));
       alert("用户名："+userInfo.username);
       alert("密码："+userInfo.password);
   }
   function removeItem(){
       window.localStorage.removeItem("username");//指定清除某个缓存
       window.localStorage.removeItem("userInfo");//指定清除某个缓存
       window.localStorage.clear();//清楚所有本地缓存
   }
</script>
</head>
<body>
   <input type="button" οnclick="setItem();" value="存储本地缓存"/>
   <input type="button" οnclick="getItem();" value="获取本地缓存"/>
   <input type="button" οnclick="removeItem();" value="清除本地缓存"/>
</body>
</html>