彻底搞懂Html5本地存储技术(一)

一、H5之前客户端本地存储的实现

1、 cookies

cookies的应用比较广泛,但有以下几个问题:

(1)每次http请求头上会带着,浪费资源

(2)每个域名客户端只能存储4K大小

(3)会造成主Domain污染

(4)cookies明文传输很不安全

2、UserData(只有IE支持)

3、其他非主流方案

二、H5相关的存储知识

1、本地存储WebStorage (localstorage & sessionstorage)

浏览器支持情况

(1)生命周期

  • localstorage永久存储除非显示移除或清空,sessionstorage在页面会话期有效关闭页面会被清除(刷新页面不会清除);

(2)API(ls和ss相同)

  • length //storage内键值对数量 只读
  • setItem //添加键值对 key value
  • getItem //根据key获取键值对
  • key  //键名 可以根据index属性获取键名
  • removeItem //根据key移除键值对
  • clear //清空

(3)存储类型及大小

  • webStorage之存储字符串(只要能被序列化为字符串都可以)
  • 每个域名下5M

(4)storage事件

webStorage发生改变时触发storage事件

  • key:键名
  • oldValue:修改之前的value
  • newValue:修改之后的value
  • url:触发改动的页面url
  • StorageArea:发生改变的Storage

(5)使用注意事项

  • 不同浏览器数据存储是相互独立的,chrome的localStorage在ff上访问不了
  • 使用时要检测浏览器是否支持(不要使用window.localStorage检测对象是否存在,应该set一条数据然后进行异常捕获)
  • 由于ls是永久存储,要做好更新策略,控制过期

1

2

3

4

5

6

7

8

9

10

11

12

13

14

function set(key,vel){

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

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

}

function get(key,exp){

    var data = locaStorage.getItem(key);

    var dataObj = JSON.parse(data);

    if(new Date().getTime()-dataObj.time<exp){

        return dataObj.data;

    }else{

        alert(‘已过期!‘);

    }

} 

  • 子域名之间是不能共享数据的-使用跨域方法传输数据

特别注意:

webstorage虽好但是并不是用来完全替代cookies,它应该用在原本不应该用cookies但是不得已用了cookies的情况下。

有WebStorage后cookie应只做它应该做的事情——作为客户端与服务器交互的通道,保持客户端状态。

时间: 2024-10-15 03:01:14

彻底搞懂Html5本地存储技术(一)的相关文章

HTML5本地存储LocalStorage和sessionStorage

以前用wordpress做博客的时候,我做了个点赞的功能.设计这个点赞功能的时候,为防止访客不断刷赞,得做个时间间隔限制,首先我的设计方案是在数据库里记录ip和点赞的时间,后来一想那还得维护数据库(其实是觉得都没人点赞还弄得那么严格搞什么),果断改成把数据放到本地保存. 本地存储数据首先想到得是cookie和html5的 localStorage. cookie兼容性好,但是存储的数据量太少;localStorage存储量大,但是兼容性不是很好,毕竟ie6之流还是有不少份额的.最后考虑到 htm

吓哭原生App的HTML5离线存储技术,却出乎意料的容易!【低调转载】

吓哭原生App的HTML5离线存储技术,却出乎意料的容易![WeX5低调转载] 2015-11-16 lakb248 起步软件 近几天,WeX5小编编跟部分移动应用从业人士聊了聊,很多已经准备好全面拥抱HTML5.但WeX5小编编也发现,依然有相当一部分从业者,仍然对HTML5将信将疑,仍对原生App技术恋恋不舍.小编编特意转发分享下文,HTML5技术崛起,从离线存储技术是可见一斑的. (正文)随着Web App的发展,越来越多的移动端App使用HTML5的方式来开发,除了一些Hybrid Ap

[html5]localStorage的原理和HTML5本地存储安全性

http://zccst.iteye.com/blog/2194344 HTML5本地存储的前身就是Cookie,HTML5的本地存储是使用localStorage对象将WEB数据持久化在本地.相比较而言HTML5本地存储中每个域的存储大小默认是5M,比起Cookie的4K要大的多.而且存储和读取数据的代码极为简练: Window.localStorage.setItem(key,value);//存储数据 Window.localStorage.getItem(key);//读取数据 Wind

HTML5本地存储——Web SQL Database

在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage,这两个是以键值对存储的解决方案,存储少量数据结构很有用,但是对于大量结构化数据就无能为力了,灵活大不够强大. Web SQL Database 我们经常在数据库中处理大量结构化数据,html5引入Web SQL Database概念,它使用 SQL 来操纵客户端数据库的 API,这些 API 是异步的,规范中使用的方言是SQLlite,悲剧正是产生于此,Web SQL Data

利用HTML5开发Android(7)---HTML5本地存储之Database Storage

在上一篇<HTML5本地存储之Web Storage篇>中,简单介绍了如何利用localStorage实现本地存储:实际上,除了sessionStorage和localStorage外,HTML5还支持通过本地数据库进行本地数据存储,HTML5采用的是"SQLite"这种文件型数据库,该数据库多集中在嵌入式设备上,熟悉IOS/Android开发的同学,应该对SQLite数据库比较熟悉. HTML5中的数据库操作比较简单,主要有如下两个函数: 1.通过openDatabase

利用HTML5开发Android(4)---HTML5本地存储之Web Storage

Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,Web Storage官方建议为每个网站5MB. Web Storage又分为两种: sessionStorage localStorage 从字面意思就可以很清楚的看出来,sessionStorage将数据保存在session中,浏览器关闭也就没了:而localStorage则一直将数据保存在客户端本地: 不管

我的项目9 网页之间传值二 HTML5本地存储

在我的项目1中写到过网页之间传值,但是那种方式在andriod4.0和以下版本就传不过去了,于是乎,就打起了HTML5本地存储的注意.大家看一下代码就知道什么意思了: 发送数据页面: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript">

HTML5本地存储localStorage与sessionStorage

在最近的项目中用到了html5的本地存储,下面总结一下. 1.html5几种存储形式 本地存储(localStorage && sessionStorage) 离线缓存(application cache) indexedDB 和 webSQL 2.localStorage && sessionStorage 过期时间:localStorage 永久存储,永不失效除非手动删除 sessionStorage 浏览器重新打开后就消失了 大小:每个域名是5M. 注:cookie一

HTML5本地存储实例页面

HTML代码: <ul id="edit" contenteditable="true"> <li>修改我吧,然后刷新页面看看,^_^</li> </ul> JS代码: var edit = document.getElementById("edit"); edit.onblur = function(){ localStorage.setItem("tododata", thi