网站制作哪些类型,北京市网站设计,美术馆网站建设要求,长春seo整站优化localStorage和sessionStorage LocalStorageLocalStorage的特点存入/读取数据使用场景 sessionStoragesessionStorage的特点存入/读取数据使用场景sessionStorage 、localStorage 和 cookie 之间的区别 测试localStorage和sessionStorageIndexedDB LocalStorage
为了弥补 Cook… localStorage和sessionStorage LocalStorageLocalStorage的特点存入/读取数据使用场景 sessionStoragesessionStorage的特点存入/读取数据使用场景sessionStorage 、localStorage 和 cookie 之间的区别 测试localStorage和sessionStorageIndexedDB LocalStorage
为了弥补 Cookie 的局限性让“专业的人做专业的事情”Web Storage 出现了。 HTML5中新增了本地存储的解决方案——Web Storage它分成两类sessionStorage和localStorage。这样有了WebStorage后cookie能只做它应该做的事情了——作为客户端与服务器交互的通道保持客户端状态。
LocalStorage的特点
保存的数据长期存在下一次访问该网站的时候网页可以直接读取以前保存的数据 大小为5M左右 仅在客户端使用不和服务端进行通信 接口封装较好。 基于上面的特点LocalStorage可以作为浏览器本地缓存方案用来提升网页首屏渲染速度(根据第一请求返回时将一些不变信息直接存储在本地)。
存入/读取数据
localStorage保存的数据以“键值对”的形式存在。也就是说每一项数据都有一个键名和对应的值。所有的数据都是以文本格式保存。 存入数据使用setItem方法。它接受两个参数第一个是键名第二个是保存的数据。
localStorage.setItem(key,value);读取数据使用getItem方法。它只有一个参数就是键名。
var valueLocal localStorage.getItem(key);使用场景
LocalStorage在存储方面没有什么特别的限制理论上 Cookie 无法胜任的、可以用简单的键值对来存取的数据存储任务都可以交给 LocalStorage 来做。
这里给大家举个例子考虑到 LocalStorage 的特点之一是持久有时我们更倾向于用它来存储一些内容稳定的资源。比如图片内容丰富的电商网站会用它来存储 Base64 格式的图片字符串
sessionStorage
sessionStorage保存的数据用于浏览器的一次会话当会话结束通常是该窗口关闭数据被清空sessionStorage 特别的一点在于即便是相同域名下的两个页面只要它们不在同一个浏览器窗口中打开那么它们的 sessionStorage 内容便无法共享localStorage 在所有同源窗口中都是共享的cookie也是在所有同源窗口中都是共享的。除了保存期限的长短不同SessionStorage的属性和方法与LocalStorage完全一样。
sessionStorage的特点
会话级别的浏览器存储 大小为5M左右 仅在客户端使用不和服务端进行通信 接口封装较好。 基于上面的特点sessionStorage 可以有效对表单信息进行维护比如刷新时表单信息不丢失。
存入/读取数据
写入
sessionStorage.setItem(key2,value2);读取
sessionStorage.getItem(key2);使用场景
sessionStorage 更适合用来存储生命周期和它同步的会话级别的信息。这些信息只适用于当前会话当你开启新的会话时它也需要相应的更新或释放。比如微博的 sessionStorage就主要是存储你本次会话的浏览足迹
lasturl 对应的就是你上一次访问的 URL 地址这个地址是即时的。当你切换 URL 时它随之更新当你关闭页面时留着它也确实没有什么意义了干脆释放吧。这样的数据用 sessionStorage 来处理再合适不过。
sessionStorage 、localStorage 和 cookie 之间的区别
共同点都是保存在浏览器端且都遵循同源策略。 不同点在于生命周期与作用域的不同 作用域localStorage只要在相同的协议、相同的主机名、相同的端口下就能读取/修改到同一份localStorage数据。sessionStorage比localStorage更严苛一点除了协议、主机名、端口外还要求在同一窗口也就是浏览器的标签页下。 生命周期localStorage 是持久化的本地存储存储在其中的数据是永远不会过期的使其消失的唯一办法是手动删除而 sessionStorage 是临时性的本地存储它是会话级别的存储当会话结束页面被关闭时存储内容也随之被释放。
测试localStorage和sessionStorage
主要测试同源同界面同源不同界面同源不同窗口不同源 数据填入 localStorage.setItem(“key1”,“value1”); sessionStorage.setItem(“key2”,“value2”); 1、同源同界面 sessionStorage.getItem(“key2”); ‘value2’ localStorage.getItem(“key1”); ‘value1’ 2、同源不同界面 localStorage.getItem(“key1”); ‘value1’ sessionStorage.getItem(“key2”); ‘value2’ 依然存在 3、同源不同窗口 sessionStorage.getItem(“key2”); null localStorage.getItem(“key1”); ‘value1’ 可以看到新打开一个窗口在同源不同窗口下sessionStorage已经丢失localStorage依然存在 4、不同源 localStorage.getItem(“key1”); null sessionStorage.getItem(“key2”); null 两者都丢失了
总结 两个都是在同源情况下会生效localStoraged不是一个浏览器的全局变量但是能对多个会话的同源网页是生效的 sessionStoraged是对当前窗口的当前会话生效如果重新打开一个窗口就会丢失。 这两个要根据实际情况来确定选择。
IndexedDB
indexedDB 是一种低级API用于客户端存储大量结构化数据(包括文件和blobs)。该API使用索引来实现对该数据的高性能搜索。IndexedDB 是一个运行在浏览器上的非关系型数据库。 既然是数据库了那就不是 5M、10M 这样小打小闹级别了。理论上来说IndexedDB 是没有存储上限的一般来说不会小于 250M。它不仅可以存储字符串还可以存储二进制数据。
