HTML5 LocalStorage 本地存储刷新值还在
h5的两种存储技术的最大区别就是生命周期。
1. localstorage是本地存储,存储期限不限;
2. sessionstorage会话存储,页面关闭数据就会丢失。
使用方法:
localstorage.setitem(“key”,“value”)//存储
localstorage.getitem(key)//按key进行取值
localstorage.valueof( )//获取全部值
localstorage.removeitem("key")//删除单个值,注意引号
localstorage.clear()//删除全部数据
localstorage.length//获得数据的数量
localstorage.key(n)//获得第n个数据的key值
注:localstorage和sessionstorage同上,使用方法一样
常用的几个总结:
localstorage.key = 1;//设置存储,名为key,值为1
localstorage.removeitem("key");//移除存储key,记得key加引号
下面是测试一个实用的例子:
来实现输入的文本内容本地存起来,以达到关闭该浏览器,再重新打开后,之前输入的内容依然还在(常见于手机钉钉日志中的请假等字段录入处)。
首先,页面上弄个文本域<textarea></textarea>,下面是jquery:
if(!localstorage.getitem("text")) //window对象的话,前面的window省略了哦 localstorage.setitem("text",""); //这里先判断一下,做空白存储,否则返回 null 显示出来体验不好,这里的if大括号省去了 localstorage.text = localstorage.getitem("text"); //取值 $("textarea").html(localstorage.text); //显示 $("textarea").keyup(function(){ //这里有很多,比如blur, change, keydown, 还有做个定时器也行,实用于多字段存储 localstorage.setitem("text",$(this).val()); //重新存储 });
以上即可实现一个实用的小功能,体现h5本地存储还是很有用的,当然字段很多的话,提供的有json方法来用哦!见以下,载自网络
<script type="text/javascript"> if(window.sessionstorage){ alert('ok'); }else{ alert('fail'); } // 设置值 sessionstorage.setitem('key_a', 1); // 取值 var key_a = sessionstorage.getitem('key_a'); console.log(key_a); // 删除 sessionstorage.removeitem('key_a'); console.log(sessionstorage.getitem('key_a'));// null sessionstorage.setitem('key_b', 1); sessionstorage.setitem('key_c', 2); // 清除所有键值 sessionstorage.clear(); console.log(sessionstorage.key_b); console.log(sessionstorage.key_c); console.log('=================='); // 设置值和取值也可以使用.符号,类似于取对象属性 // 设置值 sessionstorage.key_d = 12; // 取值 var key_d = sessionstorage.key_d; console.log(key_d); // 有个小区别,如果这个key没有了。一个返回值undefined,一个是null console.log(sessionstorage.key_null);// undefined console.log(sessionstorage.getitem('key_null'));// null console.log('==========简单演示一个存放对象的例子========'); var obj = { a : 12, b : [1,2,3,4,5], c : { x : 'a', y : ['bb', 12, 'cc', {a:1,b:2}], z : 1333 } }; sessionstorage.setitem('page', json.stringify(obj)); // 取值 var page = json.parse(sessionstorage.getitem('page')); console.log(page); // 遍历下数组 for(var i=0;i< page.b.length;i++){ console.log(page.b[i]); } // 遍历对象,通常用in for(var j in page.c){ console.log(page.c[j]) } // 删除key sessionstorage.removeitem('page'); </script>
例:计数器, 刷新页面,可看效果:
<div id="test"></div> <script> var storage = window.localstorage; if (!storage.getitem("pageloadcount")) storage.setitem("pageloadcount",0); storage.pageloadcount = parseint(storage.getitem("pageloadcount")) + 1;//必须格式转换 document.getelementbyid("test").innerhtml = storage.pageloadcount; //showstorage(); </script>
需要注意的是,html5本地存储只能存字符串,任何格式存储的时候都会被自动转为字符串,所以读取的时候,需要自己进行类型的转换。这也就是上一段代码中parseint必须要使用的原因。
以上所述是小编给大家介绍的html5 localstorage 本地存储刷新值还在,希望对大家有所帮助
推荐阅读
-
html5 localStorage本地存储_动力节点Java学院整理
-
html5中localStorage本地存储的简单使用
-
HTML5 本地存储 LocalStorage详解
-
解析HTML5中的新功能本地存储localStorage
-
详解HTML5 LocalStorage 本地存储
-
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
-
html5本地存储 localStorage操作使用详解
-
HTML5 LocalStorage 本地存储刷新值还在
-
HTML5 LocalStorage 本地存储详细概括(多图)
-
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例