HTML 5 Web存储_localStorage和sessionStorage怎么用
2018-08-10 13:41:48  By: dwtedx

• dwtedx
• HTML5开发
• 0
• 40
• 0

HTML5 提供了两种在客户端存储数据的新方法，一个是localStorage - 没有时间限制的数据存储，另外一个是sessionStorage - 针对一个 session 的数据存储。

html5 web storage的浏览器支持判断，要判断浏览器是否支持localStorage可以使用下面的代码：

if (window.localStorage) {
    alert("浏览支持localStorage");
} else {
    alert("浏览暂不支持localStorage");
}
//或者
if (typeof window.localStorage == ´undefined´) {
    alert("浏览暂不支持localStorage");
}

localStorage和sessionStorage操作

localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等

localStorage和sessionStorage的方法

setItem存储value

用途：将value存储到key字段

用法：.setItem( key, value)

代码示例：sessionStorage.setItem("key", "value");     localStorage.setItem("site", "xiao");

getItem获取value

用途：获取指定key本地存储的值

用法：.getItem(key)

代码示例：var value = sessionStorage.getItem("key");     var site = localStorage.getItem("site");

removeItem删除key

用途：删除指定key本地存储的值

用法：.removeItem(key)

代码示例：sessionStorage.removeItem("key");     localStorage.removeItem("site");

clear清除所有的key/value

用途：清除所有的key/value

用法：.clear()

代码示例：sessionStorage.clear();     localStorage.clear();

其他操作方法：点操作和[]

web Storage不但可以用自身的setItem,getItem等方便存取，也可以像普通对象一样用点(.)操作符，及[]的方式进行数据存储，像如下的代码：

var storage = window.localStorage;
storage.key1 = "hello";
storage["key2"] = "world";
console.log(storage.key1);
console.log(storage["key2"]);

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号（ddblogs）

或者你也可以关注我的新浪微博、了解DD博客的最新动态：DD博客官方微博（dwtedx的微博）

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板（dwtedx的留言板）

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛