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动画效果之animation的常用样式
Mar 09 HTML / CSS
详解CSS3 用border写 空心三角箭头 (两种写法)
Sep 29 HTML / CSS
浅析几个CSS3常用功能的写法
Jun 05 HTML / CSS
CSS3动画:5种预载动画效果实例
Apr 05 HTML / CSS
详解H5本地储存Web Storage
Jul 03 HTML / CSS
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
Jan 06 HTML / CSS
HTML5制作3D爱心动画教程 献给女友浪漫的礼物
Nov 05 HTML / CSS
html5 Canvas实现图片旋转的示例
Jan 15 HTML / CSS
canvas绘制圆角头像的实现方法
Jan 17 HTML / CSS
详解HTML5如何使用可选样式表为网站或应用添加黑暗模式
Apr 07 HTML / CSS
CSS 实现角标效果的完整代码
Jun 28 HTML / CSS
CSS list-style-type属性使用方法
May 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
叶罗丽:为什么大家对颜冰这对CP非常关心,却对金茉两人十分冷漠
2020/03/17 国漫
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
2011/06/27 Javascript
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
2012/08/14 Javascript
jquery indexOf使用方法
2013/08/19 Javascript
node.js中的http.response.write方法使用说明
2014/12/14 Javascript
javascript中sort()的用法实例分析
2015/01/30 Javascript
javascript函数中的3个高级技巧
2016/09/22 Javascript
jQuery实现的模拟弹出窗口功能示例
2016/11/24 Javascript
微信小程序实现图片压缩功能
2018/01/26 Javascript
vue-router配合ElementUI实现导航的实例
2018/02/11 Javascript
又拍云 Node.js 实现文件上传、删除功能
2018/10/28 Javascript
JavaScript实现预览本地上传图片功能完整示例
2019/03/08 Javascript
Node配合WebSocket做多文件下载以及进度回传
2019/11/07 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
2020/06/11 Javascript
[01:09:13]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第三场 1月19日
2021/03/11 DOTA
[01:09:16]DOTA2-DPC中国联赛 正赛 SAG vs Dynasty BO3 第一场 1月25日
2021/03/11 DOTA
python获取beautifulphoto随机某图片代码实例
2013/12/18 Python
Python创建系统目录的方法
2015/03/11 Python
Django框架中处理URLconf中特定的URL的方法
2015/07/20 Python
理解生产者消费者模型及在Python编程中的运用实例
2016/06/26 Python
视觉直观感受若干常用排序算法
2017/04/13 Python
Python使用base64模块进行二进制数据编码详解
2018/01/11 Python
Python实现点阵字体读取与转换的方法
2019/01/29 Python
在Python中,不用while和for循环遍历列表的实例
2019/02/20 Python
python实现简单加密解密机制
2019/03/19 Python
详解python路径拼接os.path.join()函数的用法
2019/10/09 Python
python-web根据元素属性进行定位的方法
2019/12/13 Python
法国足球商店:Footcenter
2019/07/06 全球购物
zooplus意大利:在线宠物商店
2019/08/07 全球购物
VLAN和VPN有什么区别?分别实现在OSI的第几层?
2014/12/23 面试题
什么是规则表达式
2012/05/03 面试题
EJB实例的生命周期
2016/10/28 面试题
小学教师的个人自我鉴定
2013/10/26 职场文书
领导干部四风问题自我剖析材料
2014/09/25 职场文书
CentOS 7安装mysql5.7使用XtraBackUp备份工具命令详解
2022/04/12 MySQL
Spring中bean集合注入的方法详解
2022/07/07 Java/Android