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中31种选择器使用方法教程
Dec 05 HTML / CSS
从一次项目重构说起CSS3自定义变量在项目的使用方法
Mar 01 HTML / CSS
HTML5 Canvas像素处理使用接口介绍
Dec 02 HTML / CSS
突袭HTML5之Javascript API扩展3—本地存储全新体验
Jan 31 HTML / CSS
HTML5 Web Workers之网站也能多线程的实现
Apr 24 HTML / CSS
HTML5实现一个能够移动的小坦克示例代码
Sep 02 HTML / CSS
HTML5图片预览实例分享
Jun 04 HTML / CSS
关于老式浏览器兼容HTML5和CSS3的问题
Jun 01 HTML / CSS
HTML5+css3:3D旋转木马效果相册
Jan 03 HTML / CSS
HTML5中的Web Notification桌面通知功能的实现方法
Jul 29 HTML / CSS
记一次高分屏下canvas模糊问题
Feb 17 HTML / CSS
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
Jan 20 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
pdo中使用参数化查询sql
2011/08/11 PHP
使用php 获取时间今天明天昨天时间戳的详解
2013/06/20 PHP
php实现天干地支计算器示例
2014/03/14 PHP
Codeigniter的一些优秀特性总结
2015/01/21 PHP
PHP动态规划解决0-1背包问题实例分析
2015/03/23 PHP
CI配置多数据库访问的方法
2016/03/28 PHP
Laravel 5.3 学习笔记之 错误&amp;日志
2016/08/28 PHP
PHP中实现中文字串截取无乱码的解决方法
2018/05/29 PHP
解决FLASH需要点击激活的代码
2006/12/20 Javascript
JavaScript入门教程(3) js面向对象
2009/01/31 Javascript
浅谈Javascript如何实现匀速运动
2014/12/19 Javascript
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
2015/03/04 Javascript
js变量提升深入理解
2016/09/16 Javascript
jQuery实现选中行变色效果(实例讲解)
2017/07/06 jQuery
JavaScript实现图片放大镜效果
2019/06/27 Javascript
详解Python迭代和迭代器
2016/03/28 Python
详解如何使用Python编写vim插件
2017/11/28 Python
Pycharm小白级简单使用教程
2020/01/08 Python
在pycharm中实现删除bookmark
2020/02/14 Python
python rolling regression. 使用 Python 实现滚动回归操作
2020/06/08 Python
python属于哪种语言
2020/08/16 Python
next在python中返回迭代器的实例方法
2020/12/15 Python
全球摩托车装备领导者:RevZilla
2017/09/04 全球购物
俄罗斯三星品牌商店:GalaxyStore
2020/11/04 全球购物
车间操作工岗位职责
2013/12/19 职场文书
人力资源管理求职信
2014/08/07 职场文书
详细的本科生职业生涯规划范文
2014/09/16 职场文书
教代会开幕词
2015/01/28 职场文书
党支部书记岗位职责
2015/02/15 职场文书
工作失职检讨书范文
2015/05/05 职场文书
毛主席纪念堂观后感
2015/06/17 职场文书
格列夫游记读书笔记
2015/07/01 职场文书
2016年春季运动会加油稿
2015/07/22 职场文书
2022年四月新番
2022/03/15 日漫
基于Python实现流星雨效果的绘制
2022/03/18 Python
Golang 遍历二叉树
2022/04/19 Golang