【Html5每日练习】本地存储localStorage

落日映苍穹つ 2022-06-13 12:21 282阅读 0赞

上一篇博文中讲到了sessionStorage，今天来练习一下localStorage，其实localStorage很简单，只要将对象改一下就行，看代码

<!DOCTYPE html>
    <html lang="en-US">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <input type="text" class="text" id="text" />
    <input type="button" value="保存数据" οnclick="setData();" />
    <input type="button" value="获取数据" οnclick="getData();" />
      
    <script>
    	var dataArr = [];
    	var ele = document.getElementsByClassName("text")[0];  //利用类选择器获得元素
    	function setData()
    	{
    		var data = ele.value; 
    		dataArr.push(data);
    		if("" == data)
    			alert("输入信息不能为空");
    		else
    		{
    			localStorage.setItem("boia",dataArr);
    			alert("信息已保存到date字段中");
    		}
    	}
    
    	function getData()
    	{
    		var data = localStorage.getItem("boia");
    		if("" == data || null == data)
    			alert("无数据");
    		else
    			alert("保存的数据是:"+data);
    	}
    </script>  
    </html>

localStorage和sessionStorage的区别就是 数据是永久保存在硬盘里的，所以把浏览器关了的话，数据是不会没了的

发表评论取消回复

表情：

评论列表（有 0 条评论，282人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML5本地存储localStorage，sessionStorage

HTML5新特性，用于本地存储， localStorage：不删除会一直存在斯基 sessionStorage：浏览器关掉，就跪了 / H5:数据存储

﹏ヽ暗。殇╰゛Y/ 2023年10月06日 09:11/ 0 赞/ 23 阅读

相关 html5本地存储Localstorage属性

HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的。并且在IE8以上的IE版本才支持localStorage这个属性。

- 日理万妓/ 2022年11月25日 11:55/ 0 赞/ 339 阅读

相关 vue（HTML5本地存储：localStorage）

localStorage.setItem('studentName',res.data.name);//写入localStorage数据 this.studen

朴灿烈づ我的快乐病毒、/ 2022年10月02日 04:51/ 0 赞/ 229 阅读

相关 HTML5本地存储Localstorage

转自 [点击打开链接][Link 1] ———————————————— [HTML5本地存储Localstorage][Link 1] 什么是locals

谁践踏了优雅/ 2022年08月21日 02:28/ 0 赞/ 275 阅读

相关 HTML5 LocalStorage 本地存储

http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html 说到本地存储，这玩意真是历尽千辛万

布满荆棘的人生/ 2022年08月06日 06:25/ 0 赞/ 198 阅读

相关 HTML5 LocalStorage 本地存储

HTML5 LocalStorage 本地存储,，说到本地存储，这玩意真是历尽千辛万苦才走到HTML5这一步，之前的历史大概如下图所示： ![2011052411382

Bertha 。/ 2022年07月24日 04:29/ 0 赞/ 222 阅读

相关 HTML5 Web存储 sessionStorage localStorage

sessionStorage :浏览器关闭会清除 localStorage：长时间保存 api一致：代码： <!DOCTYPE html> <h

曾经终败给现在/ 2022年07月19日 06:36/ 0 赞/ 255 阅读

相关【Html5每日练习】本地存储localStorage

上一篇博文中讲到了sessionStorage，今天来练习一下localStorage，其实localStorage很简单，只要将对象改一下就行，看代码 <

落日映苍穹つ/ 2022年06月13日 12:21/ 0 赞/ 283 阅读

相关 HTML5web存储之localStorage

转载自http://www.cnblogs.com/xinran476460042/p/5412993.html localStorage与cookie的作用类似，只能存储字

骑猪看日落/ 2022年05月30日 08:18/ 0 赞/ 207 阅读

相关 HTML5 LocalStorage 本地存储

HTML5 LocalStorage 本地存储说到本地存储，这玩意真是历尽千辛万苦才走到HTML5这一步，之前的历史大概如下图所示： ![201105

缺乏、安全感/ 2021年09月19日 02:58/ 0 赞/ 490 阅读