HTML5 LocalStorage 本地存储刷新值还在


Posted in HTML / CSS onMarch 10, 2017

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 本地存储刷新值还在,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
CSS3 特效范例整理
Aug 22 HTML / CSS
CSS3中颜色线性渐变实战
Jul 18 HTML / CSS
使用javascript和HTML5 Canvas画的四渐变色播放按钮效果
Apr 10 HTML / CSS
整理HTML5中支持的URL编码与字符编码
Feb 23 HTML / CSS
通过HTML5规范搞定i、em、b、strong元素的区别
Mar 04 HTML / CSS
html5组织内容_动力节点Java学院整理
Jul 10 HTML / CSS
详解android与HTML混合开发总结
Jun 06 HTML / CSS
HTML5自定义视频播放器源码
Jan 06 HTML / CSS
HTML5公共页面提取作为公用代码的方法
Jun 30 HTML / CSS
Html5+CSS3+EL表达式问题小结
Dec 19 HTML / CSS
HTML5 语义化标签(移动端必备)
Aug 23 HTML / CSS
CSS实现切角+边框+投影+内容背景色渐变效果
Nov 01 HTML / CSS
HTML5微信播放全屏问题的解决方法
Mar 09 #HTML / CSS
通过HTML5规范搞定i、em、b、strong元素的区别
Mar 04 #HTML / CSS
HTML5 localStorage使用总结
Feb 22 #HTML / CSS
HTML5 虚拟键盘出现挡住输入框的解决办法
Feb 14 #HTML / CSS
Html5中localStorage存储JSON数据并读取JSON数据的实现方法
Feb 13 #HTML / CSS
HTML5为输入框添加语音输入功能的实现方法
Feb 06 #HTML / CSS
HTML5拖拉上传文件的简单实例
Jan 11 #HTML / CSS
You might like
蝙蝠侠:侠影之谜
2020/03/04 欧美动漫
用PHP和ACCESS写聊天室(八)
2006/10/09 PHP
生成静态页面的PHP类
2006/11/25 PHP
php Mysql日期和时间函数集合
2007/11/16 PHP
php字符编码转换之gb2312转为utf8
2013/10/28 PHP
php对数组排序代码分享
2014/02/24 PHP
php清空(删除)指定目录下的文件,不删除目录文件夹的实现代码
2014/09/04 PHP
php5.4以上版本GBK编码下htmlspecialchars输出为空问题解决方法汇总
2015/04/03 PHP
php验证手机号码
2015/11/11 PHP
PHP实现QQ空间自动回复说说的方法
2015/12/02 PHP
PHP安装BCMath扩展的方法
2019/02/13 PHP
关于Laravel-admin的基础用法总结和自定义model详解
2019/10/08 PHP
CSS和Javascript简单复习资料
2010/06/29 Javascript
jQuery的写法不同导致的兼容性问题的解决方法
2010/07/29 Javascript
DIV菜单层实现代码
2010/11/19 Javascript
AngularJS基础知识笔记之过滤器
2015/05/10 Javascript
vue实现商城上货组件简易版
2017/11/27 Javascript
详解JS实现简单的时分秒倒计时代码
2019/04/25 Javascript
简单通过settimeout看javascript的运行机制
2019/05/10 Javascript
微信小程序激励式视频广告组件使用详解
2019/12/06 Javascript
Jquery滑动门/tab切换实现方法完整示例
2020/06/05 jQuery
[03:14]2014DOTA2西雅图国际邀请赛 EG战队巡礼
2014/07/07 DOTA
[01:57]2018DOTA2亚洲邀请赛赛前采访-iG
2018/04/03 DOTA
python实现模拟按键,自动翻页看u17漫画
2015/03/17 Python
python任务调度实例分析
2015/05/19 Python
详解Python中使用base64模块来处理base64编码的方法
2016/07/01 Python
python3+PyQt5实现支持多线程的页面索引器应用程序
2018/04/20 Python
numpy:找到指定元素的索引示例
2019/11/26 Python
Python confluent kafka客户端配置kerberos认证流程详解
2020/10/12 Python
工程师必须了解的LRU缓存淘汰算法以及python实现过程
2020/10/15 Python
Belvilla法国:休闲度假房屋出租
2020/10/03 全球购物
十岁生日家长答谢词
2014/01/17 职场文书
反邪教宣传工作方案
2014/05/07 职场文书
2014年小学教研工作总结
2014/12/06 职场文书
开国大典观后感
2015/06/04 职场文书
2016年第32个教师节红领巾广播稿
2015/12/18 职场文书