1、html5几种存储形式

本地存储(localStorage && sessionStorage)

离线缓存(application cache)

indexedDB 和 webSQL

2、localStorage && sessionStorage

过期时间:localStorage 永久存储,永不失效除非手动删除

sessionStorage 浏览器重新打开后就消失了

大小:每个域名是5M

3、localStorage API和sessionStorage API一致

getItem //取记录

   setIten//设置记录

   removeItem//移除记录

   key//取key所对应的值

   clear//清除记录

4、存储的内容

数组,图片,json,样式,脚本。。。(只要是能序列化成字符串的内容都可以存储)

5、localStorage实例


1. <!DOCTYPE>   
2. <head>   
3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
4. <meta http-equiv="Access-Control-Allow-Origin" content="anonymous">   
5. <title>locstorage 图片存储</title>   
6. </head>   
7. <body>   
8. </body>   
9. </html>   
10. <script>   
11. var src='images/1.png';//这里一定要在服务器上运行,图片要是当前服务器的图片!   
12. function set(key){   
13. var img = document.createElement('img');//创建图片元素   
14. img.addEventListener('load',function(){//绑定加载时间   
15. var imgcavens = document.createElement('canvas');   
16. imgcontent = imgcavens.getContext('2d');   
17. imgcavens.width = this.width;//设置画布大小为图片本身的大小   
18. imgcavens.height = this.height;   
19. imgcontent.drawImage(this,0,0,this.width,this.height);   
20. var imgAsDataUrl = imgcavens.toDataURL('image/png');//这个方法一定要在服务器上运行/*对图像数据做出修改以后,可以使用toDataURL方法,将Canvas数据重新转化成一般的图像文件形式。function convertCanvasToImage(canvas) {  var image = new Image();  image.src = canvas.toDataURL("image/png");  return image;}上面的代码将Canvas数据,转化成PNG data URI。*/  try{   
21. localStorage.setItem(key,imgAsDataUrl);//保存图片地址   
22. }catch(e)   
23. {   
24. console.log("storageFaild: "+e);//错误信息   
25. }   
26. },false)   
27. img.src = src;//指定需要存储的图片地址   
28. }   
29. function get(key){   
30. var srcStr = localStorage.getItem(key);//获取本地存储的元素   
31. var imgobj = document.createElement('img');   
32. imgobj.src = srcStr;//指定图片路径   
33. document.body.appendChild(imgobj);//在页面中添加元素   
34. }   
35. </script>   

上述方法可以在火狐和chrome运行,运行例子如图:

我们现在看下资源里面是如何存储的,如图:

此时无论如何刷新页面和重新打开浏览器,刚才存储的图片都是存在的,除非手动删除!

6、locstorage 过期策略

由于html5没有给本地存储设置过期策略,那么在处理图片的过期策略的时候可以编写自己过期策略程序,如下:


1. <!DOCTYPE>   
2. <head>   
3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
4. <meta http-equiv="Access-Control-Allow-Origin" content="anonymous">   
5. <title>locstorage 过期策略</title>   
6. </head>   
7. <body>   
8. </body>   
9. </html>   
10. <script>   
11. function set(key,value){   
12. var curtime = new Date().getTime();//获取当前时间   
13. localStorage.setItem(key,JSON.stringify({val:value,time:curtime}));//转换成json字符串序列 /*  说明:  JSON.parse用于从一个字符串中解析出json对象,如  var str = '{"name":"huangxiaojian","age":"23"}'  结果:  JSON.parse(str)  Object    age: "23"    name: "huangxiaojian"    __proto__: Object   

注意:单引号写在{}外,每个属性名都必须用双引号,否则会抛出异常。  JSON.stringify()用于从一个对象解析出字符串,如  var a = {a:1,b:2}  结果:  JSON.stringify(a)  "{"a":1,"b":2}" */}


1. function get(key,exp)//exp是设置的过期时间   
2. {   
3. var val = localStorage.getItem(key);//获取存储的元素   
4. var dataobj = JSON.parse(val);//解析出json对象   
5. if(new Date().getTime() - dataobj.time > exp)//如果当前时间-减去存储的元素在创建时候设置的时间 > 过期时间   
6. {   
7. console.log("expires");//提示过期   
8. }   
9. else{   
10. console.log("val="+dataobj.val);   
11. }   
12. }   
13. </script>

HTML5本地存储 localStorage操作使用详解的更多相关文章

  1. HTML5本地存储localStorage与sessionStorage详解

    前言 在最近的项目中用到了html5的本地存储,下面总结一下. 1.html5几种存储形式 本地存储(localStorage && sessionStorage) 离线缓存(appl ...

  2. HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等

    HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localSt ...

  3. HTML5 本地存储 localStorage、sessionStorage 的遍历、存储大小限制处理

    HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localSt ...

  4. HTML5本地存储localStorage与sessionStorage

    在最近的项目中用到了html5的本地存储,下面总结一下. 1.html5几种存储形式 本地存储(localStorage && sessionStorage) 离线缓存(applica ...

  5. HTML5 本地存储 LocalStorage

    说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示: 最早的Cookies自然是大家都知道,问题主要就是太小,大概也就4KB的样子,而且IE6只支持每个域名20个co ...

  6. HTML5本地存储 localStorage

    HTML5的本地存储是大势所趋,如果仅存储在内存中,则是sessionStorage,他们的语法都是一样,仅仅是一个存储在本地文件系统中,另一个存储在内存中(随着浏览器的关闭而消失),其语句如下: l ...

  7. HTML5本地存储localStorage、sessionStorage及IE专属UserData

    By:王美建 from:http://www.cnblogs.com/wangmeijian/p/4518606.html 转载请保留署名和出处! 在客户端存储数据用的最普遍的方式非cookie莫属, ...

  8. HTML5本地存储 localStorage 和 sessionStorage 的基本用法及属性

    localStorage 和 sessionStorage 的用法都是本地的存储和获取 但他们又有所区别, 1, sessionStorage 是一个短暂的本地存数,它会随着浏览器的刷新和关闭而消失, ...

  9. HTML5本地存储Localstorage

    什么是localstorage 前几天在老项目中发现有对cookie的操作觉得很奇怪,咨询下来是要缓存一些信息,以避免在URL上面传递参数,但没有考虑过cookie会带来什么问题: ① cookie大 ...

随机推荐

  1. App Store Connect

    App Store Connect https://developer.apple.com/support/app-store-connect/ https://developer.apple.com ...

  2. ESLint & jsx-quotes & quotes

    ESLint & jsx-quotes & quotes bug { "jsx-quotes": [ "error", "prefer ...

  3. mdn & remove & removeChild

    mdn & remove & removeChild Element https://developer.mozilla.org/en-US/docs/Web/API/Element ...

  4. import script module

    import script module .mjs <script type="module"> import {addTextToBody} from './util ...

  5. Python算法_整数反转(02)

    给出一个 32 位的有符号整数,你需要将这个整数中每位上的数字进行反转. 示例 1: 输入: 123输出: 321 示例 2: 输入: -123输出: -321 示例 3: 输入: 120 输出: 2 ...

  6. [源码解析] 消息队列 Kombu 之 基本架构

    [源码解析] 消息队列 Kombu 之 基本架构 目录 [源码解析] 消息队列 Kombu 之 基本架构 0x00 摘要 0x01 AMQP 1.1 基本概念 1.2 工作过程 0x02 Poll系列 ...

  7. Java 常见对象 02

    常见对象·String类 Scanner 的概述和方法介绍 * A:Scanner 的概述 * B:Scanner 的构造方法原理 * Scanner(InputStream source) * Sy ...

  8. spring-cloud-alibaba之Nacos

    在微服务构架中,集群服务间的需要调用时就需要知道各个服务的IP和提供服务的端口等信息,如果每个部署一个服务就配置一次,那么必然时非常麻烦的,因此我们需要一个能够统一管理的东西来解决这个问题,由此诞生了 ...

  9. MyBatis(二):自定义持久层框架思路分析

    使用端 引入架构端Maven依赖 SqlMapConfig.xml-数据库配置信息(数据库连接jar名称.连接URL.用户名.密码),引入Mapper.xml的路径 XxMapper.xml-SQL配 ...

  10. ES6学习笔记(2)- 箭头函数

    1. 箭头函数声明 箭头函数的声明方式示例: 1 const printValue = (condition) => { 2 let testValue = 55; 3 if (conditio ...