首页 前端知识 HTML5本地存储使用详解

HTML5本地存储使用详解

2024-06-20 00:06:43 前端知识 前端哥 29 707 我要收藏

###4. 检查浏览器是否支持Web Storage
放到页面中的代码:

function CheckStorageSupport(){
if(window.sessionStorage){
console.log(“浏览器支持sessionStorage特性!”);
}else{
console.log(“浏览器不支持sessionStorage特性!”);
}
if(window.localStorage){
console.log(“浏览器支持localStorage特性!”);
}else{
console.log(“浏览器不支持localStorage特性!”);
}
}
window.addEventListener(“load”,CheckStorageSupport,false);

控制台预览结果:
我就直接在控制台输入看结果了,读者可以把上面代码放入页面内,运行看下结果:

###5. 设置和获取Storage数据
sessionStorage和localStorage作为window属性,完全继承Storage API,它们提供操作数据的方法完全相同。下面以sessionStorage属性为例进行讲解。
1、保存数据到sessionStorage

Key为键,value为值,setItem()表示保存数据的方法。

2、从sessionStorage中获取数据
如果知道保存到sessionStorage中的key,就可以得到对应的值。sessionStorage获取数据的基本语法如下:

3、 设置和获取数据的其他写法
对于访问Storage对象还有更简单的方法,根据“键”和“值”的配对关系,直接在sessionStorage对象上设置和获取数据,可完全避免调用setItem()和getItem()方法。
保存数据的方法也可写为如下的形式。

获取数据的方法更加直接,可写为如下形式:

对于localStorage来说,同样具有上述设置数据和获取数据的方法。
代码示范:

转载请注明出处或者链接地址:https://www.qianduange.cn//article/12926.html
标签
评论
发布的文章

爱心

2024-06-27 17:06:24

读魏书生的心得体会

2024-07-03 14:07:10

jQuery 选择器

2024-05-12 00:05:34

Vue中public/assets目录区别

2024-07-02 23:07:29

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!