html5存储

html5之前实现浏览器存储,使用cookies。

cookies的特点:包含在http请求头中,内容不能大于4KB,如果主域名中设置了某个cookies,每个子域名的访问,都会在请求头中带上该cookies(主域名污染

)。

h5存储特点:解决了4KB的大小限制,不用在请求头中带存储信息,可以使用存储数据库,跨浏览器支持。

经常使用的两个存储变量localStorage,sessionStorage.它们分别有getItem,setItem,removeItem等方法。

他们可以存数组,图片,脚本,json数据等,子域名之间不能共享数据,超出存储大小时如何处理?可以采用FIFO先进先出方式把最先的删除或者LRU(Least Recently Used 近期最少使用算法)

生命周期:localStorage除非删除才会失效,sessionStorage只要关闭浏览器就会失效。。

设置localStorage更新策略,

function set(key,data){

   var curT= new Date().getTime();

   localStorage.setItem(key,JSON.stringify({data:data,time:curT}));
}

function get(key,exp){
  var data = localStorage.getItem(key);

  var dataObj = JSON.parse(data);

  if(new Date().getTime()-dataObj.time>exp){
      console.log("超时");
  }
  else{
     dataObj.data;
  }

}

  

时间: 2024-12-19 22:01:04

html5存储的相关文章

关于HTML5 存储中indexedDB的一些问题

IndexedDB 是一种可以让你在用户的浏览器内持久化存储数据的方法.IndexedDB 为生成 Web Application 提供了丰富的查询能力,使我们的应用在在线和离线时都可以正常工作. IndexedDB是一个比较新的存储方案,作为代替WebSQL出现的,可以再客户端想数据库那样存储数据.具体的支持情况可以查看Can I Use.可以看到支持情况并不怎么好. 具体的使用方法可以参考以下文章或视频: MDN:使用 IndexedDB 慕课网:HTML5存储 下面是我在学习中遇到的一些问

操作HTML5存储对象

读取HTML5的localStorahe和sessionStorage的内容,并删除存储的内容. #!usr/bin/env python #-*- coding:utf-8 -*- #操作HTML5存储对象 from selenium import webdriver import unittest,time class Html5Storage(unittest.TestCase): def setUp(self): self.driver = webdriver.Chrome() def

谈谈html5存储之IndexdDB

IndexdDB简介 html5中indexdDB是一种能在浏览器持久的存储结构化数据的数据库:且具有丰富的查询能力. 新建一个IndexdDB数据库 IDBOpenDBRequest定义有几个重要的属性: onerror:新建或打开数据库失败的回调 onsuccess:新建或打开数据库成功的回调 onupgradeneeded:新建或打开数据库版本发生变化时触发的回调 以上的几个API均是异步执行,所以我们在它们的回调函数中处理我们需要的数据. 1 function createIndexDB

HTML5存储--离线存储

离线存储技术 HTML5提出了两大离线存储技术:localstorage与Application Cache,两者各有应用场景:传统还有离线存储技术为Cookie. 经过实践我们认为localstorage应该存储一些非关键性ajax数据,做锦上添花的事情: Application Cache用于存储静态资源,仍然是干锦上添花的事情: 而cookie只能保存一小段文本(4096字节):所以不能存储大数据,这是cookie与上述缓存技术的差异之一,而因为HTTP是无状态的,服务器为了区分请求是否来

HTML5 存储

application cache 只能更新全部,不能更新单独的文件 在更新后,要重新打开浏览器,缓存才会生效, 不能实时生效

html5 存储系列之localStorage第一篇

获取localStorage对象保存的全部数据信息.通常需要遍历这些数据,在遍历过程中需要访问localStorage对象的以下两个属性 length:表示localStorage对象中保存数据的总量. key:表示保存数据时的键名项 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <s

HTML5的五种客户端离线存储方案

最近折腾HTML5游戏需要离线存储功能,便把目前可用的几种HTML5存储方式研究了下,基于HT for Web写了个综合的实例,分别利用了Cookie.WebStorage.IndexedDB以及FileSystem四种本地离线存储方式,对燃气监控系统的表计位置.朝向.开关以及表值等信息做了CURD的存取操作. http://www.hightopo.com/guide/guide/core/serialization/examples/example_exportimport.html HTM

HTML5 Web 客户端五种离线存储方式汇总

最近折腾HTML5游戏需要离线存储功能,便把目前可用的几种HTML5存储方式研究了下,基于HT for Web写了个综合的实例,分别利用了Cookie.WebStorage.IndexedDB以及FileSystem四种本地离线存储方式,对燃气监控系统的表计位置.朝向.开关以及表值等信息做了CURD的存取操作. HTML5的存储还有一种Web SQL Database方式,虽然还有浏览器支持,是唯一的关系数据库结构的存储,但W3C以及停止对其的维护和发展,所以这里我们也不再对其进行介绍:Bewa

基于 HTML5 的数据存储

以前想做个静态网页APP.最初的思路是用本地文件存储数据,后来发现在手机上运行时,文件无法找到. 经过了长达几个月的搜索(实际也就几天),没有找到合适的方法. 就在绝望的时候,无意间搜到基于HTML5的各种保存数据的方法.在此简单与大家分享一下. 前四种是从http://www.hightopo.com/blog/344.html截取. Cookie 最古老的存储方式为Cookie,这种存储方式存储内容很有限,只适合做简单信息存储,存取接口设计得极其反人类,为了介绍HTML5存储方案的完整性我顺