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

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的留言板)

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


猜你喜欢的

快速评论


技术评论

  • 该技术还没有评论、赶快抢沙发吧...
DD记账
top
+