HTML5 API详解（9）:大家都知道的 localStorage 本地存储

提到本地存储localStorage就不得不提sessionStorage和cookie这两个。其中localStorage和sessionStorage可以合成称为web Storage。

这里比较一下cookie和web Storage：

cookie：容量4kb，各种浏览器都支持，但每次请求都会把本地存的cookies发送到服务器。

web Storage：存储空间更大，数据仅存在本地，不与服务器发生交互，独立的存储空间。

而localStorage和sessionStorage的区别：

localStorage：同源（相同个域名、协议和端口）的数据会长时间保存下来，即使浏览器关掉了也不受影响。

sessionStorage：数据存储在窗口对象中，对于浏览器其他窗口或者新标签不可见。窗口关闭，数据丢失。

localStorage的使用：

1.设置键值对：localStorage.setItem('name','value'); 还有对象简易的写法：localStorage.name = value或者localStorage['name'] = value;

2.获取指定键值对：localStorage.getItem('name');

3.删除指定键值对：localStorage.removeItem('name');简易的写法：delete localStorage['name'];

4.删除同源下的所有键值对：localStorage.clear();

5.获取所有键值对的总数长度：localStorage.length;

6.获取键值对的key：localStorage.key(indexNum);

7.storage事件，当localStorage的键值对发生变化的时候，就会触发storage事件

if (window.addEventListener) {

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

} else {

window.attachEvent("onstorage", handlerStorage); //IE浏览器

};

事件触发之后会传一个对象作为参数给处理函数，其中主要用到的对象属性有：

{

url:'当前window的url',

key:'键',

newValue:'新值',

oldValue:'旧值',

timeStamp:'时间戳',

type:'storage'

}

PS:storage事件，在当前窗口或者标签下是不会触发的，确实如此，由此可见，storage事件是用于localStorage中的数据改变的时候，用来通知同源下的其他窗口和标签的。

HTML5 API详解（9）:大家都知道的 localStorage 本地存储相关推荐

HTML5 API详解（17）:Web SQL DataBase本地数据库
Web SQL Database是一个已经废弃的规范,但是鉴于除了IE和Firefox,其他浏览器都已经实现了Web SQL Database,并且它还具有一些HTML5 Storage所不具有的特性 ...
HTML5 API详解（18）:IndexedDB 本地存储
Web SQL Database实际上已经被废弃,而HTML5的支持的本地存储实际上变成了Local Storage和Session Storage与IndexedDB.Web Storage使用简单 ...
HTML5 API详解（3）：为何网页上要增加Battery电池状态API
手机自身的电源管理已经相当不错了,那为何网页上还要增加一个HTML5 Battery电池状态API呢? 随着HTML5以及CSS3技术支持与发展,以及手机越来越高性能带来的可行性.移动端的页面显然会越 ...
HTML5 API详解（15）:History 不刷新也可以实现网页跳转
HTML4中的History API history这个东西大家应该都不陌生,我们经常使用history.back(-1)来实现后退功能,具体的属性和方法如下: 属性 length 历史的项数.Jav ...
HTML5 API详解（14）:Notification 实现桌面提醒
桌面提醒功能可以在窗口隐藏甚至是浏览器最小化(不被激活)的情况下,依然可以对用户进行信息通信,采用的方式就是在电脑桌面的右下角弹出消息提示框.这样的一个功能可以使用在一些消息推送的场景下.不过,虽然h ...
HTML5 API详解（5）:Page Visibility API帮您省流量，提高体验
页面可见性API可以让你知道一个页面什么时候是隐藏的,什么时候是显示的.当页面被最小化或者被切换成后台标签页时,浏览器会触发一个 visibilitychange事件,告诉你用户已经看不到这个页面了 ...
HTML5 API详解（16）:web socket 全双工通信
目前实时Web应用的实现方式,大部分是围绕轮询和其他服务器端推送技术展开的,其中最著名的是Comet.Comet技术可以让服务器主动以异步方式向客户端推送数据. 使用轮询时,浏览器定期发送HTTP请求 ...
HTML5 API详解（12）:canvas画布API提供的内容很丰富啊~
不考虑代码质量的话,一般来说css3>canvas>纯js. 1. css3动画是独立与js线程的,js的运算操作不会阻塞css3的动画,所以在系统cpu占用率较高的时候,css3的动画性 ...
HTML5 API详解(11)：Cache 应用程序缓存，这下离线也可以玩了
Web缓存是指一个Web资源(如html页面,图片,js,数据等)存在于Web服务器和客户端(浏览器)之间的副本.缓存会根据进来的请求保存输出内容的副本:当下一个请求来到的时候,如果是相同的URL,缓 ...

HTML5 API详解（9）:大家都知道的 localStorage 本地存储

HTML5 API详解（9）:大家都知道的 localStorage 本地存储相关推荐

最新文章

热门文章