热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

HTML5-本地存储与cookies

一、H5的几种存储形式1、本地存储(localstorage和sessionstorage)存储形式:key-->value过期策略:localstorage永久存储,不过期,除非手动删除

一、H5的几种存储形式

1、本地存储(localstorage和sessionstorage)

存储形式:key-->value

过期策略:localstorage永久存储,不过期,除非手动删除,sessionstorage在重启浏览器、关闭页面或新开页面时失效

大小限制:每个域名5M

使用方法:(localstorage与sessionstorage操作相同)

getItem(读取)、setItem(设置)、removeItem(移除)、key(索引)、clear(清空)

存储内容:数组、json、图片、脚本、样式等可以序列化为字符串的内容

//自定义localstorage的过期逻辑
function set(key,val){
var curTime=new Date().getTime();
localStorage.setItem(key,JSON.stringify({data:val,time:curTime}))
}
function get(key,exp){
var data=localStorage.getItem(key);
var dataObj=JSON.parse(data);
if(new Date().getTime()-dataObj.time>exp){
console.log(
"已过期")
}
else{
console.log(
"data="+dataObj.data)
}
}

使用场景:利用本地数据,减少网络传输,弱网高延迟低带宽,尽量数据本地化

2、离线存储(application cache)

3、IndexedDB和Web SQL

 

二、H5之前

1、COOKIEs

优点:几乎所有浏览器都兼容;缺点:是每次请求头信息会带上;大小限制为4k;主Domain污染

它的属性包括如下

value  //键值对,如test=hello
expires //绝对过期时间,如new Date(),所以浏览器都支持
domain //限定域名,如www.abc.com
path //限定路径,如/index
max-age //相对失效时间,单位为秒;取代expires,冲突则以max-age为准(IE不支持)
secure //协议,不需要指定,当HTTPS通信时自动打开
HttpOnly//仅用于服务器发送,JS无法读取

document.COOKIE
='test=hello;expires='+new Date(2017,5,1)+';path=/index;domain=www.abc.com;max-age=60*60*24*365;'

 

//设置固定过期时间的COOKIEs
function setCOOKIE(name,value){
var Days = 30;
var exp = new Date();
exp.setTime(exp.getTime()
+ Days*24*60*60*1000);
document.COOKIE
= name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
//设置自定义过期时间COOKIE
function setCOOKIE(name,value,time){
var msec = getMsec(time); //获取毫秒
var exp = new Date();
exp.setTime(exp.getTime()
+ msec*1);
document.COOKIE
= name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
//将字符串时间转换为毫秒,1秒=1000毫秒
function getMsec(DateStr){
var timeNum=str.substring(0,str.length-1)*1; //时间数量
var timeStr=str.substring(str.length-1,str.length); //时间单位前缀,如h表示小时
if (timeStr=="s"){ //20s表示20秒
return timeNum*1000;}
else if (timeStr=="h"){ //12h表示12小时
return timeNum*60*60*1000;}
else if (timeStr=="d"){
return timeNum*24*60*60*1000;} //30d表示30天
}
//读取COOKIEs
function getCOOKIE(name){
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)"); //正则匹配
if(arr=document.COOKIE.match(reg)){
return unescape(arr[2]);
}
else{
return null;
}
}
//删除COOKIEs
function delCOOKIE(name){
var exp = new Date();
exp.setTime(exp.getTime()
- 1);
var cval=getCOOKIE(name);
if(cval!=null){
document.COOKIE
= name + "="+cval+";expires="+exp.toGMTString();
}
}

2、UserData:(仅IE)


推荐阅读
  • 本文介绍了Java工具类库Hutool,该工具包封装了对文件、流、加密解密、转码、正则、线程、XML等JDK方法的封装,并提供了各种Util工具类。同时,还介绍了Hutool的组件,包括动态代理、布隆过滤、缓存、定时任务等功能。该工具包可以简化Java代码,提高开发效率。 ... [详细]
  • 本文介绍了在CentOS 6.4系统中更新源地址的方法,包括备份现有源文件、下载163源、修改文件名、更新列表和系统,并提供了相应的命令。 ... [详细]
  • 本文介绍了闭包的定义和运转机制,重点解释了闭包如何能够接触外部函数的作用域中的变量。通过词法作用域的查找规则,闭包可以访问外部函数的作用域。同时还提到了闭包的作用和影响。 ... [详细]
  • 阿,里,云,物,联网,net,core,客户端,czgl,aliiotclient, ... [详细]
  • 使用在线工具jsonschema2pojo根据json生成java对象
    本文介绍了使用在线工具jsonschema2pojo根据json生成java对象的方法。通过该工具,用户只需将json字符串复制到输入框中,即可自动将其转换成java对象。该工具还能解析列表式的json数据,并将嵌套在内层的对象也解析出来。本文以请求github的api为例,展示了使用该工具的步骤和效果。 ... [详细]
  • 本文讨论了在openwrt-17.01版本中,mt7628设备上初始化启动时eth0的mac地址总是随机生成的问题。每次随机生成的eth0的mac地址都会写到/sys/class/net/eth0/address目录下,而openwrt-17.01原版的SDK会根据随机生成的eth0的mac地址再生成eth0.1、eth0.2等,生成后的mac地址会保存在/etc/config/network下。 ... [详细]
  • 在编写业务代码时,常常会遇到复杂的业务逻辑导致代码冗长混乱的情况。为了解决这个问题,可以利用中间件模式来简化代码逻辑。中间件模式可以帮助我们更好地设计架构和代码,提高代码质量。本文介绍了中间件模式的基本概念和用法。 ... [详细]
  • React项目中运用React技巧解决实际问题的总结
    本文总结了在React项目中如何运用React技巧解决一些实际问题,包括取消请求和页面卸载的关联,利用useEffect和AbortController等技术实现请求的取消。文章中的代码是简化后的例子,但思想是相通的。 ... [详细]
  • 本文介绍了在wepy中运用小顺序页面受权的计划,包含了用户点击作废后的从新受权计划。 ... [详细]
  • 如何查询zone下的表的信息
    本文介绍了如何通过TcaplusDB知识库查询zone下的表的信息。包括请求地址、GET请求参数说明、返回参数说明等内容。通过curl方法发起请求,并提供了请求示例。 ... [详细]
  • 本文介绍了获取关联数组键的列表的方法,即使用Object.keys()函数。同时还提到了该方法在不同浏览器的支持情况,并附上了一个代码片段供读者参考。 ... [详细]
  • 模板引擎StringTemplate的使用方法和特点
    本文介绍了模板引擎StringTemplate的使用方法和特点,包括强制Model和View的分离、Lazy-Evaluation、Recursive enable等。同时,还介绍了StringTemplate语法中的属性和普通字符的使用方法,并提供了向模板填充属性的示例代码。 ... [详细]
  • python限制递归次数(python最大公约数递归)
    本文目录一览:1、python为什么要进行递归限制 ... [详细]
  • 本文介绍了如何使用JSONObiect和Gson相关方法实现json数据与kotlin对象的相互转换。首先解释了JSON的概念和数据格式,然后详细介绍了相关API,包括JSONObject和Gson的使用方法。接着讲解了如何将json格式的字符串转换为kotlin对象或List,以及如何将kotlin对象转换为json字符串。最后提到了使用Map封装json对象的特殊情况。文章还对JSON和XML进行了比较,指出了JSON的优势和缺点。 ... [详细]
  • 解决.net项目中未注册“microsoft.ACE.oledb.12.0”提供程序的方法
    在开发.net项目中,通过microsoft.ACE.oledb读取excel文件信息时,报错“未在本地计算机上注册“microsoft.ACE.oledb.12.0”提供程序”。本文提供了解决这个问题的方法,包括错误描述和代码示例。通过注册提供程序和修改连接字符串,可以成功读取excel文件信息。 ... [详细]
author-avatar
随便他们好了
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有