最新消息:文章中包含代码时,请遵守代码高亮规范!

Html本地存储/缓存

原创文章 user 234浏览 0评论

html存储/缓存可以存放在html服务器和客户端,其作用体现在减少网络带宽消耗、降低服务器压力和减少网络延迟,加快页面打开速度,存放某些键值对或者唯一辨识码等方面。

目前常用的缓存/本地存储有 localstorage、sessionstorage、cookie和manifest 技术

1.cookies

Cookie 是一些数据, 存储于你电脑上的文本文件中。当 web 服务器向浏览器发送 web 页面时,在连接关闭后,服务端不会记录用户的信息。Cookie 的作用就是用于解决 “如何记录客户端的用户信息”:

大小限制:4k  用于存储小数据

使用方法有:

var x = document.cookie; 获取所有cookie
document.cookie="keyName=keyValue"; 创建和修改 cookie
document.cookie = "keyName=; expires=Thu, 01 Jan 1970 00:00:00 GMT";  设置 expires 参数为以前的
时间,使Cookie过期自动删除

2.sessionstorage

        SessionStorage用于本地存储一个会话中的数据,这些数据只有在同一个会话中的页面才能访问并且会话结束,窗口关闭后,数据就会消失。是一种会话级别的存储。

大小限制:每个域名5M 用于存储浏览器关闭就会消失的数据

使用方法有:

sessionStorage.setItem("keyName", "keyValue"); 存储
sessionStorage.getItem("keyName"); 获取数据
sessionStorage.removeItem("keyName"); 删除指定数据
sessionStorage.clear(); 清空全部数据

3.localstorage

        LocalStorage是永久性的本地缓存,存储在客户端的浏览器上,除非主动删除,是不会过期的。LocalStorage采用的是键值对的方式进行存储,存储方式只能是字符串。存储内容可以用图片、json、样式、脚本等。

大小限制:每个域名5M 用于存储长时间保留的数据

使用方法有:

localStorage.setItem(keyName, keyValue) 存储
localStorage.getItem(keyName) 获取数据
localStorage.removeItem(keyName) 删除指定数据
localStorage.clear()清空全部数据
localStorage.key(N)获取第N个数据的key键值

4.manifest 

        HTML5 引入了应用程序缓存,这意味着 Web 应用程序可以被缓存,然后在无互联网连接的时候进行访问。用户可以在离线时使用应用程序,缓存的资源可以更快地加载,浏览器只从服务器上下载已更新/已更改的资源。

使用方法:

<html manifest="URL"> 文档的缓存 manifest 的地址。

cookie 与 webStorage 区别

        1、cookie数据始终在同源的http请求中携带,cookie在浏览器和服务器端来回传递,而localstorage和sessionstorage不会自动把数据传送给服务器端,仅在本地保存。

        2、存储大小限制不同,cookie的存储数据大小要求不能超过4k,每次的http请求都会携带cookie,所以保存的数据需要比较小。sessionstorage和localstorage存储数据大小限制比cookie要大,可以达到5M或者更大,不同浏览器设置可能不同。

        3、数据生命周期。cookie的生命周期一般在其设置的过期时间之前有效。而sessionstorage仅在关闭窗口前有效,localstorage持久有效,直到手动删除。

        4、作用域不同,sessionstorage不在不同浏览器中共享,即使是同一页面也不支持。而localstorage在所有同源窗口中都是共享的,同样,cookie在所有同源窗口中也是可以共享的。

        5、cookie的数据还有路径的概念,可以通过设置限制cookie只属于某个路径

        6、webstorage 支持事件通知机制,可以将数据更新的通知发送给监听者。

转载时请注明出处及相应链接,本文永久地址:https://blog.yayuanzi.com/25277.html


pay_weixin
pay_weixin
微信打赏
pay_weixin
支付宝打赏
感谢您对作者Miya的打赏,我们会更加努力!    如果您想成为作者,请点我

您必须 登录 才能发表评论!