HTML5 提供了两种在客户端存储数据的新方法:
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储
之前,这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。
在 HTML5 中,数据不是由每个服务器请求传递的,而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。
常用的方法
localStorage.setItem("key","value");//以“key”为名称存储一个值“value” localStorage.getItem("key");//获取名称为“key”的值 localStorage.removeItem("key"); localStorage.clear(); localStorage.length;//属性 localStorage.key(index)
事件
storage事件,参数为
key,
oldval,
newval,
url,
storage
var se = document.createEvent("StorageEvent"); se.initStorageEvent('storage', false, false, key, oldval, newval, url, storage); window.dispatchEvent(se); window.addEventListener("storage",function(e){ console.log(e); },false);
在同源页面中某一页面对storage数据进行添加或更新处理后,其余的同源页面只要注册了storage事件,就会触发事件。
相关推荐
使用HTML5 Web存储的localStorage和sessionStorage方式进行Web页面数据本地存储。 页面参考如下图,能将页面上的数据进行本地存储。并能读取存储的数据显示在页面上。 localStorage(本地存储),可以长期存储数据,...
html5的一个非常cool的功能,就是web storage,类似于之前的cookie,不过与之不同的是,web storage 拥有本地5兆的容量可以存储,而cookie却只有4K,这是完全不能比的优势。webstrange又分为:localstorage,...
通过阅读各路大神对web存储locastorage和sessionstorage的用法解析,深有感触,下面小编把localstorage和sessionstorage使用记录分享到脚本之家平台,供大家参考
【cookie_session_localstorage_sessionstorage】【前端】web中的k-v存储们有什么区别
html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage。sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁
1、html5几种存储形式 本地存储(localStorage && sessionStorage) 离线缓存(application cache) indexedDB 和 webSQL 2、localStorage && sessionStorage 过期时间:localStorage 永久存储,永不失效...
client-persist:是localForage的分支,支持sessionStorage的Web客户端离线存储。 支持使用API轻松抓取IndexedDB,WebSQL,localStorage和sessionStorage。
Vue Web存储一个用于Web存储的简约Vue.js插件功能选择localStorage或sessionStorage或两者都作为您存储的所有k的前缀。存储的键自动JSON.stringify和JSON.parse用于交叉表通信的事件安装#yarn yarn添加vue-web-...
NSStorage 是一个最小的模块,它为 Web 存储 API(localStorage 和 sessionStorage)提供命名空间。 这有助于防止您的 web 应用程序的不同部分覆盖并可能破坏彼此的数据。 ##Usage var fooStorage = NSStorage....
网络存储一个最小的Javascript库,可以改善您使用localStorage或sessionStorage 。安装npm $ npm install webStorage吉特$ git clone https://github.com/georapbox/webStorage.git几句话... 该库的目的是允许用户...
WebStorageCookieStore 基于Web存储API(localStorage和sessionStorage)的硬cookie库的cookie存储用法 import { CookieJar } from 'tough-cookie' ;import WebStorageCookieStore from 'tough-cookie-web-storage-...
Web存储缓存语言见WebStorageCache对HTML5 localStorage和sessionStorage进行了扩展,添加了超时时间,序列化方法。可以直接存储json对象,同时可以非常简单的进行超时时间的设置。优化: WebStorageCache自动清除...
优雅的存储WebStorage (localStorage, sessionStorage) 包装器,具有命名空间、过期和清理功能用法 var s1 = new GracefulStorage ( localStorage , 'storage1' ) ;s1 . set ( 'key1' , { foo : 'bar' } ) ;s1 . get...
localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前,这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 ...
4、本地存储 localStorage、sessionStorage 5、web worker 浏览器本地缓存localStorage与sessionStorage的区别? 答:生命周期不同:前者一直存在浏览器,除非用户手动清除,后者生命周期结束于浏览器或者tab页 的...
本地存储localstorage/sessionstorage的封装,cookie完美解决方案
今天我们从前端的角度了解一下浏览器存储,我们常见且常用的存储方式主要由两种:cookie、webStorage(localStorage和sessionStorage)。下面我们来一一认识它们。 Cookie基于HTTP规范,用来识别用户。 Cookie是...
这个插件的目标是简化 webstorage 的使用(也称为 sessionStorage 和 localStorage): 您可以存储任何类型的数据类型并且不关心转换 你可以使用命名空间 您可以跨不同的选项卡/窗口使用存储事件(也在 IE = 上) ...