文档章节

HTML5存储

j
 jedi_knight
发布于 2015/10/10 15:52
字数 589
阅读 84
收藏 6

#####客户端存储历程 ######远古时期

  • cookies的用法和缺陷

http请求头上会带着、大小4k、主Domain污染

  • userdata

只有IE支持、XML文件

######目标

解决4k的小小问题、解决请求头常带存储信息的问题、解决关系型存储的问题、跨浏览器

######HTML5时代

  • 本地存储localstorage && sessionstorage
      localstorage永久存储,永不失效,除非手动删除,sessionstorage会随着关闭页面或浏览器失效;
      每个域名5M 常用localstorage和sessionstorage API:getItem() setItem() removeItem() key() clear()
      可以存数组、json数据、图片、脚本、样式文件;
      需要考虑的:1.存储更新策略,过期控制;2.子域名之间不能共享存储数据;3.超出存储大小之后如何存储(LRU、FIFO);4.server端如何取到。
  • 离线缓存application cache
  • indexedDB和WebSQL   一种能在浏览器中持久地存储结构化数据的数据库,并且为Web应用提供了丰富的查询能力。   IndexDB按域名分配独立空间,偏向于NoSQL操作数据库。1个独立域名——>n个数据库——>n个对象存储空间(表)——>n个对象数据。   Web SQL使用SQL操作数据库,核心方法:openDatabase、transaction、executeSql,W3C已停止维护。

######使用注意事项

使用前判断浏览器是否支持 写数据时,需要异常处理,避免超出容量抛错 避免把敏感信息写入localstorage key的唯一性

######HTML5存储案例

//如何实现把图片存在客户端?
var src = "111.jpg";
function set(key){
    var img = document.createElement('img');
    img.addEventListener("load",function(){
        var imgCanvas = document.createElement("canvas");
        imgContext = imgCanvas.getContext("2d");
        //确保canvas元素的大小和图片尺寸一致
        imgCanvas.width = this.width;
        imgCanvas.height = this.height;
        //渲染图片到canvas中
        imgContext.drawImage(this.0,0,this.width,this.height);
        //用data url的形式取出
        var imgAsDataURL = imgCanvas.toDataURL("image/png");
        //保存到本地存储中
        try {
            localstoreage.setItem(key,imgAsDataURL);
        }catch(e){
            console.log("Storage failed: " + e);
        }
    },false);
    img.src = src;
}
function get(key){
    //从本地缓存获取图片并且渲染
  var srcStr = localstorage.getItme(key);
  var imgObj = document.createElement('img');
  imgObj.src = srcStr;
  document.body.appendChild(imgObj);
    
}
//过期控制
function set(key,v){
    var curTime = new Date().getTime();
    localstorage.setItem(key,JSON.stringify({data:v,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("experies");
    }else{
        console.log("data="+dataObj.data);
    }
}
//如何实现跨域共享客户端缓存
//如何做到真正的离线访问web应用?
//如何实现一个客户端的数据库?

© 著作权归作者所有

j
粉丝 2
博文 54
码字总数 24224
作品 0
南京
高级程序员
私信 提问
网站页面间脚本传至 sessionStorage

sessionStorage、localStorage详解 webstorage是本地存储,存储在客户端,包括localStorage和sessionStorage。在JavaScript语言中可通过 window.sessionStorage 或 sessionStorage 调用此对象...

小仙女KOMons
2018/07/10
0
0
分享6个实用的HTML5本地存储(Local Storage)教程

日期:2011/12/12 来源:GBin1.com HTML5 中最强大并且最具有魅力的特性在于本地存储,使用本地存储可以大大的节约服务器端的压力,并且可以有效的利用客户端的计算性能。使用HTML5可以在客户...

gbin1
2011/12/12
2.9K
1
前端存储 - localStorage

发布自Kindem的博客,欢迎大家转载,但是要注意注明出处 localStorage 介绍 在HTML5中,引入了两个新的前端存储特性: localStorage sessionStorage 这两者非常相似,都是用来在前端保存一定...

Kindem
2018/07/08
0
0
网站页面间脚本传值 sessionStorage

sessionStorage、localStorage详解 webstorage是本地存储,存储在客户端,包括localStorage和sessionStorage。在JavaScript语言中可通过 window.sessionStorage 或 sessionStorage 调用此对象...

小仙女KOMons
02/20
0
0
localStorage 和 sessionStorage 简介

导读 一、 简述 sessionStorage 和 sessionStorage 是 HTML5 新增的两个特性,这两个特性主要是用来作为会话存储和本地存储来使用的,解决了 cookie 存储空间不足的问题; sessionStorage 属...

qianyin925
05/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

设计模式之访问者模式

定义 Represent an operation to be performed on the elements of an object structure. Visitor lets you define a new operation without changing the classes of the elements on which......

陈年之后是青葱
昨天
11
0
PhotoShop 高级应用 : 分层云彩 - 简单闪电效果

1.创建黑白渐水平渐变图层 2.选择滤镜选项卡: 渲染--->分层云彩功能 3.将滤镜-云彩效果渲染后的图层进行反相操作 【此时出现闪电效果】 6.调整色阶,使得闪电效果更明显 7.创建剪贴蒙版:色...

东方墨天
昨天
13
0
三种实现Android主界面Tab的方式

三种实现Android主界面Tab的方式 https://www.cnblogs.com/caobotao/p/5103673.html

shzwork
昨天
13
0
java8-Optional类

背景 NPE问题,100%的Java程序员都碰到,并且曾经是心中的痛。 1965年英国TonyHoare引入了Null引用,后续的设计语言包括Java都保持了这种设计。 一个例子 业务模型 Person 有车一族, 有Car...

春天springcarter
昨天
13
0
py 登录github时token以及cookie的应用

import requestsfrom bs4 import BeautifulSoup## 获取tokenr1 = requests.get('https://github.com/login')s1 = BeautifulSoup(r1.text,'html.parser')token = s1.find(name='input',......

子枫Eric
昨天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部