localstorage 一直存储在本地，数据存储是永久的，除非用户或程序对其进行删除操作；
sessionstorage在会话期内有效，数据在关闭后自动删除；
localstorage是基于域的，任何在该域内的页面都可以访问， sessionstorage在保存它的窗口，和由当前窗口创建的新窗口有效，直到相关联的标签页关闭；
web storage其实是html4 中 cookies存储机制的一个改进版本，但是两种机制的功能又不相同：
cookie在浏览器和服务器间来回传递， sessionstorage和localstorage不会；
sessionstorage和localstorage的存储空间更大，有更多丰富易用的接口，各自独立的存储空间；
请注意以上区别，前端面试中，只要问到 html5 相关 基本就这些。
浏览器的支持情况
目前所有主流的浏览器都在一定程度上支持 html5 的 web storage特性。 由下图可以看出，基本上所有现代浏览器都已经支持 web storage。
移动浏览器的情况更为乐观
android平台和 ios 平台各自的浏览器都基本上支持 web storage 本地存储特性。 目前市场上的移动设备， 除了 android 手机和 iphone 手机外，越来越多的平板电脑面世，而且基本上依赖着两种平台。在移动端使用 web storage 我们几乎不需要考虑浏览器是否支持， 当然从代码的严谨来说，建议最好在使用前先检查浏览器是否支持
复制代码
if (window.localstorage) {
// 浏览器支持 localstorage
}
if (window.sessionstorage) {
// 浏览器支持 sessionstorage
}
复制代码
web storage api
复制代码
interface storage {
readonly attribute unsigned long length;
domstring? key(unsigned long index);
getter domstring getitem(domstring key);
setter creator void setitem(domstring key, domstring value);
deleter void removeitem(domstring key);
void clear();
};
复制代码
所谓domstring： 一个utf-16字符串，javascript正是使用了这种编码的字符串,所以domstring就等同是javascript中的string.
每个存储对象提供一个 key/value ( 键/值 ) 对列表， 被称为数据项。 key 可以是任意的字符串( 包括空字符串 )，value 也可以是任意的字符串。
规范定义的接口提供了:
localstorage.length 一个只读的 length属性。 可以知道 localstorage 中存储着多少条数据
localstorage.setitem(key, val) 存储一条数据
localstorage.getitem(key) 通过 key 获取该条数据
localstorage.removeitem(key) 删除一条数据
localstorage.clear() 清空所有 key/value 键值对 items
storage 只能存储key/value对，而且只支持字符串类型的数据， setitem() 方法传入的值都会自动转化为 string 类型。复合数据类型（array object）转化结果同 tostring 方法。
如果你想保存其它类型的数据，在保存的时候需要转化成字符串，在读取时，再转化回来；
使用 localstorage 存储和读取 json 格式数据：
复制代码
// 定义json格式字符串
var userdata = {
name: "zichen",
age: "24",
sex: "男",
adress: "杭州"
}
// 存储 userdata 数据
localstorage.setitem("userdata", json.stringify(userdata));
// 读取 userdata 数据并赋值给变量
var newuserdata = json.parse(localstorage.getitem("userdata"));
console.log(newuserdata);
// 删除 userdata
localstorage.removeitem("userdata");
复制代码
sessionstorage 浏览器支持情况同 localstorage ， 属性和方法及使用方式也和 localstorage一致。
storage 事件监听
对 storage 进行存取操作的同时，如果需进行监听，可以使用 html5 web storage api内置的事件监听器对数据进行监控， storage中的数据有任何变动，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 更新前的键值。
newvalue 数据更新后的键值。
url 记录 storage 事件发生时的源地址。
storagearea 指向事件监听对应的 storage对象
使用 w3c 标准事件注册方法 addeventlistener 进行注册监听：
window.addeventlistener(“storage”,
function(e) {
console.log(e)
},
true);
如对本文有疑问， 点击进行留言回复！！
我要评论
网友评论