【我的前端自学之路】【HTML5】web 存储

时间:2022-02-28 20:33:11

以下为自学笔记内容,仅供参考。

转发请保留原文链接:https://www.cnblogs.com/it-dennis/p/10503539.html

什么是Web存储

cookie最大的缺陷是在每一次HTTP请求中都会携带所有符合规则的cookie数据.这会增加请求响应时间,特别是XHR请求. 在HTML5中使用sessionStoragelocalStorage代替cookie是更好的做法.这两种都属于web storage,相较于cookie更加安全和快速。数据不会保存在服务器上,可以存储大量的数据而不影响服务器的性能。

Web存储的两种方式

【我的前端自学之路】【HTML5】web 存储

local storage

localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。

session storage

针对一个 session 的数据存储。当用户关闭浏览器窗口后,数据会被删除。

API

不管是 localStorage,还是 sessionStorage,可使用的API都相同,常用的有如下几个(以localStorage为例):

保存数据:localStorage.setItem(key,value);
读取数据:localStorage.getItem(key);
删除单个数据:localStorage.removeItem(key);
删除所有数据:localStorage.clear();
得到某个索引的key:localStorage.key(index);

参考资料

https://www.w3cschool.cn/html5/html5-webstorage.html

https://www.w3cschool.cn/tanzt0/af72kozt.html

希望可以帮助到你,如有问题可以留言或者点击下方图片联系我!

【我的前端自学之路】【HTML5】web 存储