浏览器存储

最新推荐文章于 2025-04-21 08:35:06 发布

unravel space

最新推荐文章于 2025-04-21 08:35:06 发布

阅读量191

点赞数

文章标签： html5 html javascript

本文链接：https://blog.youkuaiyun.com/weixin_45557181/article/details/120080753

版权

前端优化专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了浏览器中的Cookie, SessionStorage和LocalStorage三种存储方式，用于实现跨页面数据共享。重点阐述了它们的区别、使用场景及API操作。特别指出SessionStorage与服务端session的不同，并提供了示例代码展示如何在不同页面间同步数据。同时，提到了storage事件的触发条件及其应用场景。最后，探讨了浏览器对WebStorage的存储容量限制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

浏览器存储

实现浏览器页面之间跨页面数据共享
Cookie, SessionStorage, LocalStorage这三者都可以被用来在浏览器端存储数据，而且都是字符串类型的键值对！

注意：session和SessionStorage不是一个概念！！！在服务端有一种存储方式叫做：session会话存储，常常被简称session

session:会话
SessionStorage:浏览器端用于存储数据的容器，常常被前端人员简称为session。
session会话存储：服务器端一种存储数据的方式，常常被后端人员简称为session。

Web Storage

SessionStorage和LocalStorage都是浏览器本地存储，统称为Web Storage，存储内容大小一般支持5-10MB
浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。

相关API：
1. xxxxxStorage.setItem('key', 'value');
		该方法接受一个键名和值作为参数，将会把键值对添加到存储中，如果键名存在，则更新其对应的值。
		
2. var data = xxxxxStorage.getItem('person');
	该方法接受一个键名作为参数，返回键名对应的值。

3. xxxxxStorage.removeItem('key');
	该方法接受一个键名作为参数，并把该键名从存储中删除。
	
4. xxxxxStorage.clear()
	调用该方法会清空存储中的所有键名

备注：SessionStorage存储的内容会随着浏览器窗口关闭而消失。
LocalStorage存储的内容，需要手动清除才会消失。

storage事件：
1. Storage对象发生变化时触发（即创建/更新/删除数据项时，Storage.clear() 只会触发一次）
2. 在同一个页面内发生的改变不会起作用
3. 在相同域名下的其他页面发生的改变才会起作用。(修改的页面不会触发事件，与它共享的页面会触发事件)
key : 修改或删除的key值，如果调用clear(),为null
newValue : 新设置的值，如果调用clear(),为null
oldValue : 调用改变前的value值,如果调用clear(),为null
url : 触发该脚本变化的文档的url
storageArea : 当前的storage对象
使用方法：
window.addEventListener(‘storage’,function (event) {
//此处写具体业务逻辑
})

示例：(两个页签都处在同一个域名下)

// storage1.html（存储数据的页签）
<body>
  <input type="text" id="commounication">
  <script>
    const commounication=document.getElementById('commounication')
    commounication.addEventListener('keyup',()=>{
     window.localStorage.setItem('key',commounication.value)
    })
  </script>
</body>

// storage2.html（获取数据的页签）
<body>
  <input type="text" id="commounication">
  <script>
    var commounication=document.getElementById('commounication')
    window.addEventListener('storage',function(event){
      console.log(event)
      commounication.value=event.newValue
    })
  </script>
</body>

浏览器储存量的支持

http://dev-test.nemikor.com/web-storage/support-test/

浏览器存储

浏览器存储

Web Storage

示例：(两个页签都处在 同一个域名 下)

浏览器储存量的支持

示例：(两个页签都处在同一个域名下)