H5新特性之localStorage

最新推荐文章于 2024-08-12 22:44:37 发布

weixin_43727391

最新推荐文章于 2024-08-12 22:44:37 发布

阅读量276

点赞数

CC 4.0 BY-SA版权

分类专栏： h5 文章标签： h5

本文链接：https://blog.youkuaiyun.com/weixin_43727391/article/details/84197080

h5 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了如何使用localStorage进行数据存储，包括其基本操作如设置、获取和删除数据，以及一个实际的HTML示例，展示了如何在网页中实现这些功能。

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

localStorage的使用：存储数据到本地。存储的容量20mb左右。
       不同浏览器不能共享数据
       同一个浏览器的不同窗口可以共享数据
       数据存储在硬盘上，不会随着页面或浏览器的关闭而清除
       如果想清除，必须手动清除
       setItem(key,value):存储数据，以键值对的方式存储
       getITem(key):获取数据，通过指定名称的key获取对应的value值
       removeItem(key):删除数据，通过指定名称key删除对应的值
       clear():清空所有存储的内容<br>
       <input type="text" id="userName"/><br>
       <input type="button" value="设置数据" id="setData"/>
       <input type="button" value="获取数据" id="getData"/>
       <input type="button" value="删除数据" id="removeData"/>
       <script type="text/javascript">
           document.querySelector("#setData").onclick=function(){
               var name=document.querySelector("#userName").value;
               window.localStorage.setItem("user",name);
           };
           document.querySelector("#getData").onclick=function(){
               var name=window.localStorage.getItem("user");
               alert(name)
           };
           docuemnt.querySelector("#remove").onclick=function(){
               window.localStorage.removeItem("user");
           };
       </script>