首页
HTML+CSS
JavaScript
Vue
WordPress
WP Functions
注册/登录
首页 > HTML+CSS > 正文

HTML5本地存储WebStorage

WebStorage

使用HTML5可以在本地存储用户的浏览数据。早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速,这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上。它也可以存储大量的数据,而不影响网站的性能。数据以 键/值 对存在, web网页的数据只允许该网页访问使用。

Web Storage的目的是为了克服由cookie带来的一些限制,当数据需要被严格控制在客户端上时,无须持续地将数据发回服务器。Web Storage的两个主要目标是:

  • 提供一种在cookie之外存储会话数据的途径。
  • 提供一种存储大量可以跨会话存在的数据的机制。

Web Storage又分为两种: sessionStorage 和localStorage ,即这两个是Storage的一个实例。从字面意思就可以很清楚的看出来,sessionStorage将数据保存在session中,浏览器关闭也就没了;而localStorage则一直将数据保存在客户端本地。其API提供的方法有以下几种:

- length:唯一的属性,只读,用来获取storage内的键值对数量。

- setItem (key, value) ——  保存数据,以键值对的方式储存信息。

- getItem (key) ——  获取数据,将键值传入,即可获取到对应的value值。

- removeItem (key) ——  删除单个数据,根据键值移除对应的信息。

- clear () ——  删除所有的数据

- key (index) —— 获取某个索引的key

使用

在实现了WebStorage的浏览器中,页面有两个全局的对象localStorage和sessionStorage:

以localStorage为例,看一段简单的操作代码

var ls = localStorage;
    console.log(ls.length);//0
    ls.setItem('name', 'Byron');
    ls.setItem('age', '24');
    console.log(ls.length);//2

    //遍历localStorage
    for (var i = 0; i < ls.length; i++) {
        var key = ls.key(i);
        console.log(key + ' : ' + ls.getItem(key));
        /*
            age : 24 
            name : Byron 
        */
    }

    // 移除 age
    ls.removeItem('age');

    for (var i = 0; i < ls.length; i++) {
        var key = ls.key(i);
        console.log(key + ' : ' + ls.getItem(key));
        /*
            name : Byron 
        */
    }
    ls.clear();
    console.log(ls.length);//0

事件

同时HTML5规定了一个storage事件,在WebStorage发生变化的时候触发,可以用此监视不同页面对storage的修改

interface StorageEvent : Event {
    readonly attribute DOMString key;
    readonly attribute DOMString ? oldValue;
    readonly attribute DOMString ? newValue;
    readonly attribute DOMString url;
    readonly attribute Storage ? storageArea;
};
  • key:键值对的键
  • oldValue:修改之前的value
  • newValue:修改之后的value
  • url:触发改动的页面url
  • StorageArea:发生改变的Storage

在index.php中定义

<a href="test.php" target="_blank">Test</a>
window.addEventListener('storage', function (e) {
    console.log(e.key + ' is changed form ' + e.oldValue + ' to ' + e.newValue + ' by ' + e.url);
    console.log(e.storageArea == localStorage);
}, false);

localStorage.setItem('userName', 'Byron');

test.php的代码

localStorage.setItem('userName','Casper');

在index.php页面点击链接访问test.php时可以看到index.php的控制台输出log:

userName is changed form Byron to Casper by http://localhost/test.php

true

为什么比cookie好

1. 从容量上讲WebStorage一般浏览器提供5M的存储空间,用来存储视频、图片神马的不够,但对于绝大部分操作足矣

2.安全性上WebStorage并不作为HTTP header发送的浏览器,所以相对安全

3.从流量上讲,因为WebStorage不传送到服务器,所以不必要的流量可以节省,这样对于高频次访问或者针对手机移动设备的网页还是很不错的。

这并不意味着WebStorage可以取代cookie,而是有了WebStorage后cookie能只做它应该做的事情了——作为客户端与服务器交互的通道,保持客户端状态。所以仅仅作为本地存储解决方案WebStorage是优于cookie的。

注意点

1.浏览器兼容性,这个几乎是所有HTML5新特性中最容易实施的了,因为IE8 的浏览器都支持,在IE7、IE6中可以使用IE User Data实现。

2011052411384081

2. 由于localStorage和sessionStorage都是对象,所以我们也可以通过”.key”或”[key]”的方式获取、修改键值对,但不推荐这么做

localStorage.userName=\'Frank\';
console.log(localStorage[\'userName\']);

3.虽然localStorage存储在本地,但不同的浏览器存储存储数据是独立的,所以在Chrome上存储的localStorage在FireFox上是获取不到的。

4. localStorage和sessionStorage只能存储字符串类型,对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理,低版本IE可以使用json2.js

5.除了控制台,Chrome还为本地存储提供了非常直观的显示方式,调试的时候很方便

image

展开全部
分享到:

网友评论comments

发表评论

电子邮件地址不会被公开。 必填项已用*标注

暂无评论

Copyright © 2012-2013 Weesh Net Media
扫二维码
扫二维码
返回顶部