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 相关文章推荐
CSS教程:CSS3圆角属性
Apr 02 HTML / CSS
使用JS+CSS3技术:让你的名字动起来
Apr 27 HTML / CSS
CSS3效果:自定义“W”形运行轨迹实例
Mar 29 HTML / CSS
简单聊聊H5的pushState与replaceState的用法
Apr 03 HTML / CSS
深入浅析HTML5中的SVG
Nov 27 HTML / CSS
调用HTML5的Canvas API绘制图形的快速入门指南
Jun 17 HTML / CSS
canvas实现扭蛋机动画效果的示例代码
Oct 17 HTML / CSS
html5视频常用API接口的实战示例
Mar 20 HTML / CSS
HTML5开发动态音频图的实现
Jul 02 HTML / CSS
如何使用canvas绘制可移动网格的示例代码
Dec 14 HTML / CSS
浅谈移动端中的视口(viewport)的具体使用
Apr 13 HTML / CSS
Unicode中的CJK(中日韩统一表意文字)字符小结
Dec 06 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
DOTA2【瓜皮时刻】Vol.91 RTZ山史最惨“矿难”
2021/03/05 DOTA
PHP中全局变量global和$GLOBALS[]的区别分析
2012/08/06 PHP
PHP HTML JavaScript MySQL代码如何互相传值的方法分享
2012/09/30 PHP
PHP exif扩展方法开启详解
2014/07/28 PHP
php实现上传图片保存到数据库的方法
2015/02/11 PHP
php获取服务器操作系统相关信息的方法
2016/10/08 PHP
PHP常用正则表达式精选(推荐)
2019/05/28 PHP
jquery使用jxl插件导出excel示例
2014/04/14 Javascript
javascript深拷贝的原理与实现方法分析
2017/04/10 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
2017/05/20 Javascript
vue2.x 父组件监听子组件事件并传回信息的方法
2017/07/17 Javascript
利用vue开发一个所谓的数独方法实例
2017/12/21 Javascript
微信小程序实现发送验证码按钮效果
2018/12/20 Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
2019/01/27 Javascript
微信公众号服务器验证Token步骤图解
2019/12/30 Javascript
js实现随机点名器精简版
2020/06/29 Javascript
[03:49]DOTA2英雄基础教程 光之守卫
2014/01/14 DOTA
python中as用法实例分析
2015/04/30 Python
代码详解django中数据库设置
2019/01/28 Python
python中如何使用分步式进程计算详解
2019/03/22 Python
解决Python3 抓取微信账单信息问题
2019/07/19 Python
Python Web框架之Django框架文件上传功能详解
2019/08/16 Python
django实现用户注册实例讲解
2019/10/30 Python
Python 2种方法求某个范围内的所有素数(质数)
2020/01/31 Python
手把手教你安装Windows版本的Tensorflow
2020/03/26 Python
win7上tensorflow2.2.0安装成功 引用DLL load failed时找不到指定模块 tensorflow has no attribute xxx 解决方法
2020/05/20 Python
Python可以用来做什么
2020/11/23 Python
Sunglasses Shop瑞典:欧洲领先的太阳镜网上商店
2018/04/22 全球购物
微软马来西亚官方网站:Microsoft马来西亚
2019/11/22 全球购物
电气工程及其自动化专业求职信
2014/06/23 职场文书
电子信息工程专业自荐书
2014/06/24 职场文书
施工安全责任书范本
2014/07/24 职场文书
实习班主任自我评价
2015/03/11 职场文书
活着观后感
2015/06/03 职场文书
读《人生的智慧》有感:闲暇是人生的精华
2019/12/25 职场文书
Elasticsearch 配置详解
2022/04/19 Java/Android