admin 管理员组

文章数量: 887239

07

Web stroage

cookie和localstroage区别

/* cookie               localstorage4kb左右                 5M数量有限                不限必须发送给服务端         只有在本地存储可以设置过期时间         永久一般是服务端设置         一般是客户端设置*/

SessionStorage和LocalStorage都是本地存储，不会被发送到服务器上。同时空间比Cookie大很多，一般支持5-10M

浏览器端通过 Window.sessionStorage 和 Window.localStorage
属性来实现本地存储机制。

Storage.getItem(‘key’);

  • 该方法接受一个键名作为参数，返回键名对应的值。

Storage.setItem(‘key’, ‘value’);

  • 该方法接受一个键名和值作为参数，将会把键值对添加到存储中，如果键名存在，则更新其对应的值。

Storage.removeItem(‘key’);

  • 该方法接受一个键名作为参数，并把该键名从存储中删除。

Storage.clear()

  • 调用该方法会清空存储中的所有键名

storage事件：

  • Storage
    对象发生变化时（即创建/更新/删除数据项时，重复设置相同的键值不会触发该事件，Storage.clear()
    方法至多触发一次该事件）会触发

  • 在同一个页面内发生的改变不会起作用

  • 在相同域名下的其他页面发生的改变才会起作用。(修改的页面不会触发事件，与它共享的页面会触发事件)

localStroage和sessionStorage区别

LocalStorage是浏览器本地持久化存储技术，也叫永久存储

SessionStorage是浏览器本地临时存储技术，也叫会话存储

IndexDB和WebSQL

  • IndexedDB 和 WebSQL 都是一种低级API，用于客户端存储大量结构化数据。

  • 该API使用索引来实现对该数据的高性能搜索。

  • 不同的是IndexedDB是非关系型，而WebSQL是关系型。

  • WebSQL官方不在维护，但兼容性较好

  • IndexedDB在维护，兼容性较差

localStorage

  • 是浏览器本地持久化存储技术，也叫永久存储

  • localStroage是window全局对象,可以直接使用

localStroage.setItem(“key”,“value”)

  • 设置
oBtn1.onclick = function(){window.localStorage.setItem("rolls","royce");window.localStorage.setItem("test","12345")}

localStroage.getItem(“key”)

oBtn2.onclick = function () {console.log(localStorage)//Storage {rolls: "royce", test: "12345", length: 2}console.log(localStorage.rolls)//"royce"// 即使上面可以获取,还是建议使用getItem()console.log(localStorage.getItem("rolls"));//royce}

localStorage.remove(“key”)


localStorage.clear()

sessionStorage

操作同localStorage

onstorage

当其他同源的页面修改了localStorage的时候,会自动触发其他页面的stroage事件

从而让其他页面随之更新

<script>//当其他同源的页面修改了localStorage的时候,会自动触发其他页面的stroage事件//从而让其他页面随之更新window.onstorage = function (data) {console.log(data)console.log(data.oldValue) //改变之前的值console.log(data.newValue) //改变之后的值}
</script>


本文标签： 07

版权声明：本文标题：07 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1686656339h21121.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。