HTML5本地存储Web Storage讲解

网友投稿 817 2022-05-29

Web Storage功能,顾名思义,就是在Web上针对客户端本地储存数据的功能,具体来说Web Storage分为两种;

sessionStorage:

将数据保存在session对象中,所谓session是指用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间,也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。

localStorage:

将数据保存在客户端本地的硬件设备(通常指硬盘,当然可以是其他的硬件设备)中,即是浏览器被关闭了,该数据仍然存在,下次打开浏览器访问网站时,仍然可以继续使用。

sessionStorage与localStorage区别:

这两者的区别在于sessionStorage为浏览器临时保存,而localStorage为硬件设备永久保存。即localStorage没有过期时间,只要不clear或remove,数据会一直保存。

sessionStorage 针对一个session进行数据存储,生命周期与session相同,当用户关闭浏览器后,数据将被删除。

接下来我们一起看一下:

SessionStorage:

将数据保存在session对象中,所谓session是指用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间会话,也就是用户浏览这个网站所花费的时间就是session的生命周期。session对象可以用来保存在这段时间内所要求保存的任何数据。

此对象主要有两个方法:

保存数据:sessionStorage.setItem(Key, value);

读取数据:sessionStorage.getItem(Key);

Key:表示你要存入的键名称,此名称可以随便命名,可以按照变量的意思来理解。

Value:表示值,也就是你要存入Key中的值,可以按照变量赋值来理解。

使用方法:

保存数据:sessionStorage.setItem("website", "W3Cfuns.com");

读取数据:sessionStorage.getItem("website");

代码:

<a target="_blank" href="https://www.huoban.com/news/tags-1031.html"style="font-weight:bold;">Html5</a>--本地存储SessionStorage

LocalStorage:

localStorage 默认支持的容量为5M,当调用setItem超过上限时,会触发QuotaExceededError异常。当然有些浏览器支持修改容量上限,但为了兼容其他浏览器,最好按5M的容量来使用。

使用方法与SessionStorage如出一辙,如下代码所示:

此对象主要有两个方法:

保存数据:localStorage.setItem(Key, value);

读取数据:localStorage.getItem(Key);

HTML5本地存储Web Storage讲解

Key:表示你要存入的键名称,此名称可以随便命名,可以按照变量的意思来理解。

Value:表示值,也就是你要存入Key中的值,可以按照变量赋值来理解。

使用方法:

保存数据:localStorage.setItem("website", "W3Cfuns.com");

读取数据:localStorage.getItem("website");

案例:

HTML5--本地存储LocalStorage

HTML web前端

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:云存储技术体系
下一篇:第三章【Linux 常用命令之文件管理】
相关文章