html5(七) Web存储

http://www.cnblogs.com/stoneniqiu/p/4206796.html

http://www.cnblogs.com/v10258/p/3700486.html

html5中的Web Storage包括两种存储方式:

    sessionStorage: 这个存储机制只在页面会话期间保持数据可用。实际上 与真正的回话不同,通过这种机制存储的信息,只能由一个窗口或一个选项卡访问,一旦窗口关闭,它就消失。但存储规范说的仍然是“会话”,因为即使在窗口刷新或者从同一网站加载新页面的时候,信息仍然保持。

     localStorage:这个机制与桌面应用程序的存储机制类似。存储的数据永久保持,创建数据的应用程序一直可以使用数据。

它们的工作接口类似,共享相同的方法和属性。

提示:多数浏览器只有在源是真正的服务器时,才能正常处理这些API。

setItem(key,value) 创建数据

getItem(key)  获取数据

removeItem(key) 移除某个数据

clear()  清空整个存储空间。

key(index)

属性:length

事件:storage——为应用程序保留的存储的空间中每次发生变化时都会触发这个事件。

sessionStorage.setItem(key, value);     

localStorage.setItem(key, value); 

var value = sessionStorage.getItem(key);
var value = localStorage.getItem(key);

sessionStorage.removeItem(key);     localStorage.removeItem(key);

sessionStorage.clear();
localStorage.clear();

var storage = window.localStorage;
 for (var i=0, len = storage.length; i  <  len; i++)
{
    var key = storage.key(i);
    var value = storage.getItem(key);
    console.log(key + "=" + value);
}

window.addEventListener("storage",show,false);

function newitem(){
   sessionStorage.setItem(key, value);
   localStorage.setItem(key, value);
}

function show(){

}
时间: 2024-11-14 23:06:47

html5(七) Web存储的相关文章

Html5的Web存储和WebSql

HTML5 Web 存储 使用HTML5可以在本地存储用户的浏览数据. 早些时候,本地存储使用的是cookies.但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据,而不影响网站的性能. 数据以 键/值 对存在, web网页的数据只允许该网页访问使用. 本地存储的背景 众所周知Html4时代Cookie的大小.格式.存储数据格式等限制,网站应用如果想在浏览器端存储用户的部分信息,那么只能借助于Cookie.但是Coo

html5的web存储详解

以前我们在本地存储数据都是用document.cookie来存储的,但是由于其的存储大小只有4K左右,解析也很复杂,给开发带来了诸多的不便.不过现在html5出了web的存储,弥补了cookie的不足,而且开放起来也是相当的方便 web存储分两类 sessionStorage 容量大小约为5M左右,该方式的生命周期为关闭浏览器窗口为止 localStorage 容量大小约为20M左右, 存储的数据不会随着用户浏览时会话过期而过期,但会应用户的请求而删除.浏览器也因为存储空间的限制或安全原因删除它

HTML5新增web存储方式

客户端存储数据的两个对象为: 两个对象在使用方式没有任何区别,唯一的不同点蚀储存数据 的有效时间 ①localStorage - 没有时间限制的数据存储 除非手动删除,否则数据将一直保存在本地文件: ②sessionStorage - 针对一个 session 的数据存储 当浏览器关闭时,sessionStorage就被清空: 在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage: [Storage的数据存储] 1.Storage可以像普通对象一

html5的web存储与cookie的区别

以下从3个方面进行比较: 1,容量:cookie只有4KB,localStorage和sessionStorage最大容量5M 2,是否会携带到ajax中:cookie由每个对服务器的请求来传递,会影响获取资源的效率,localStorage和sessionStorage只有在请求时使用数据.它使在不影响网站性能的情况下存储大量数据成为可能. 3,API易用性:cookie需要封装才能使用,localStorage和sessionStorage简单易用 HTML5 专门为存储而设计提供了两种在客

【HTML5】Web存储

HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前,这些都是由 cookie 完成的.但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高. 在 HTML5 中,数据不是由每个服务器请求传递的,而是只有在请求时使用数据.它使在不影响网站性能的情况下存储大量数据成为可能. 对于不同的网站,数据存储于不

js Web存储方式

JSON是数据交互中最常用的一种数据格式. 由于各种语言的语法都不同,在传递数据时,可以将自己语言中的数组.对象等转换为JSON字符串> 传递之后,可以讲JSON字符串,在解析为JSON对象. JSON 对象的用法与js中的对象基本相同,唯一需要区别的是,JSON中的键,必须是字符串. JSON 名称/值对 JSON 数据的书写格式是:名称/值对. eg:   "name" : "1111" JSON 值 JSON 值可以是: ● 数字(整数或浮点数) ● 字

HTML5 鼠标拖拽以及web存储

html5 拖拽: (function(){}())执行匿名函数,要用括号包括起来: 1:用鼠标事件来做拖拽: 2:在HTML5中加入draggable="true",就可以拖拽但是是分成了两个,这个更有效率: ondragstart:拖拽开始: ondrag:拖拽中 ondragend:拖拽结束: ondragenter:进入投放去: ondragover:投放区移动: ondragleave:离开投放区: ondrop:投放区投放:           ondragover会阻止d

第一个go的web程序;调用七牛云存储的音频api问题解决;条件搜寻文件里的内容

package main import ( "html/template" "io" "io/ioutil" "log" "net/http" "os" "path" "runtime/debug" ) const ( ListDir      = 0x0001 UPLOAD_DIR   = "./uploads" TEMPLA

HTML5 02. 多媒体控件、拖拽事件、历史记录、web存储、应用程序缓存、地理定位、网络状态

多媒体 video:是行内块(text-align: center; 对行内块适用) <figure></figure>: 多媒体标签 : <figcaption></figcaption>: 多媒体标题 方法: load() 加载.play()播放.pause()暂停 属性: currentTime 视频播放的当前进度. duration:视频的总时间. paused:视频播放的状态 事件:   oncanplay:事件在用户可以开始播放视频/音频(aud

Html5之高级-13 Web存储API (两个存储系统、sessionStorage、localStorage)

一.两个存储系统 两个存储系统 - 万维网最初的设想,是作为展示信息的一种方式.信息处理是后来才出现的,但是Web的实质并没有变---信息在服务器上处理,然后显示给用户.因为系统没有利用计算机资源,所以复杂操作都是在服务器上完成的 - 对于任何程序来说,能够实现数据存储是必备功能之一,并且在需要的时候能够提供数据.但在过去的Web用户端,没有能够支持数据存储的有效机制 - cookie曾用来在客户端存储少量信息,但受其性质所限,cookie只能存储一些短的字符串 - 在 HTML5中提供了 We