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原生支持div铺满浏览器的方法
Aug 30 HTML / CSS
html5本地存储_动力节点Java学院整理
Jul 12 HTML / CSS
html5中localStorage本地存储的简单使用
Jun 16 HTML / CSS
canvas画布实现手写签名效果的示例代码
Apr 23 HTML / CSS
用HTML5实现鼠标滚轮事件放大缩小图片的功能
Jun 25 HTML / CSS
基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作
Jan 11 HTML / CSS
H5 meta小结(前端必看篇)
Aug 24 HTML / CSS
Canvas制作旋转的太极的示例
Mar 09 HTML / CSS
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
Jul 12 HTML / CSS
HTML5实现视频弹幕功能
Aug 09 HTML / CSS
HTML文本属性&amp;颜色控制属性的实现
Dec 17 HTML / CSS
CSS实现隐藏搜索框功能(动画正反向序列)
Jul 21 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
MySQL修改密码方法总结
2008/03/25 PHP
php仿discuz分页效果代码
2008/10/02 PHP
php数组合并array_merge()函数使用注意事项
2014/06/19 PHP
php实现的太平洋时间和北京时间互转的自定义函数分享
2014/08/19 PHP
php二维数组合并及去重复的方法
2015/03/04 PHP
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
2007/03/24 Javascript
List all the Databases on a SQL Server
2007/06/21 Javascript
jquery.combobox中文api和例子,修复了上面的小bug
2011/03/28 Javascript
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
2012/01/13 Javascript
javascript 基础篇3 类,回调函数,内置对象,事件处理
2012/03/14 Javascript
javascript模拟实现C# String.format函数功能代码
2013/11/25 Javascript
从js向Action传中文参数出现乱码问题的解决方法
2013/12/29 Javascript
DOM基础教程之事件类型
2015/01/20 Javascript
基于javascript、ajax、memcache和PHP实现的简易在线聊天室
2015/02/03 Javascript
分享JavaScript与Java中MD5使用两个例子
2015/12/23 Javascript
JS集成fckeditor及判断内容是否为空的方法
2016/05/27 Javascript
如何检测JavaScript的各种类型
2016/07/30 Javascript
jquery实现网页定位导航
2016/08/23 Javascript
vue中的scope使用详解
2017/10/29 Javascript
深入理解Puppeteer的入门教程和实践
2019/03/05 Javascript
微信小程序实现张图片合成为一张并下载
2019/07/16 Javascript
在Vue中获取自定义属性方法:data-id的实例
2020/09/09 Javascript
使用PYTHON接收多播数据的代码
2012/03/01 Python
python根据文件大小打log日志
2014/10/09 Python
python中使用xlrd、xlwt操作excel表格详解
2015/01/29 Python
Python算法输出1-9数组形成的结果为100的所有运算式
2017/11/03 Python
python使用Tkinter实现在线音乐播放器
2018/01/30 Python
Python简单计算给定某一年的某一天是星期几示例
2018/06/27 Python
Python高级property属性用法实例分析
2019/11/19 Python
Python定时任务APScheduler原理及实例解析
2020/05/30 Python
用纯css3和html制作泡沫对话框实现代码
2013/03/21 HTML / CSS
Vichy薇姿加拿大官网:法国药妆,全球专业敏感肌护肤领先品牌
2018/07/11 全球购物
英国婚礼商城:Wedding Mall
2019/11/02 全球购物
宣传策划类求职信范文
2014/01/31 职场文书
求职信内容怎么写
2014/05/26 职场文书
《1942》观后感
2015/06/08 职场文书