专栏首页小古哥的博客园HTML5-本地存储与cookies

HTML5-本地存储与cookies

一、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)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 读书笔记-JavaScript面向对象编程(一)

    前前后后大概花了两周的时间,终于把这本书大致看完了,对之前javascript高级程序设计中模糊不清的概念,有了一些新的看法和角度,整体上来说,本书还是一本比较...

    小古哥
  • 读书笔记-JavaScript面向对象编程(二)

    第5章 原型 5.1 原型属性(所有函数拥有一个prototype属性,默认为空对象)   5.1.1 利用原型添加方法和属性 function Gadget(...

    小古哥
  • JS高级-数据结构的封装

    最近在看了《数据结构与算法JavaScript描述》这本书,对大学里学的数据结构做了一次复习(其实差不多忘干净了,哈哈)。如果能将这些知识捡起来,融入到实际工作...

    小古哥
  • 10个短小却超实用的JavaScript代码段

    JavaScript正变得越来越流行,它已经成为前端开发的第一选择,并且利用基于JavaScript语言的NodeJS,我们也可以开发出高性能的后端服务,甚至我...

    企鹅号小编
  • js倒计时,秒倒计时,天倒计时

    距某某开幕式还有 [<script language="JavaScript" type="text/javascript">djs()</script>] 天...

    用户3055976
  • 分享前端开发常用代码片段

    如果你的网页中需要使用大量初始不可见的(例如,悬停的)图像,那么可以预加载这些图像。

    程序员宝库
  • asp.net产生客户端Cookie与js操作Cookie大全

    Js操作Cookie封装的代码[各个浏览器测试兼容]: 1 function SetCookie(name, value)//两个参数,一个是cookie的名...

    Java中文社群_老王
  • ASP.NET Core 给上传的图片加水印

    图片加水印是网站中使用非常广泛的技术,可以保护网站内容的版权,例如我博客这样的网站。在传统ASP.NET(.NET Framework)中,我们可以使用Syst...

    Edi Wang
  • js的常见的三种密码加密方式-MD5加密、Base64加密和解密和sha1加密详解总结

    写前端的时候,很多的时候是避免不了注册这一关的,但是一般的注册是没有任何的难度的,无非就是一些简单的获取用户输入的数据,然后进行简单的校验以后调用接口,将数据发...

    何处锦绣不灰堆
  • Java 泛型(上)

    开发一个能够存储各种类型对象(比如:String 对象、Integer 对象等)的容器(容器就是存储数据的,可以是对象,可以是数组等等)。

    帅飞

扫码关注云+社区

领取腾讯云代金券