sessionStorage和localStorage的存储和同源访问

我不生产bug
690 阅读4分钟

简介

sessionStorage和localStorage是es6新出的浏览器存储机制,并且存储空间为5M左右，远比cookie存储空间4k大。并且存放格式也是key-value键值对的形式存储，对于值(value)的存储形式也是DOMstring(字符串)，浏览器刷新数据也不会丢失。localStorage是允许我们在客户端的浏览器上存储数据，即使在浏览器窗口关闭后也会持续存在。存储在这里的数据可以在整个特定领域内被访问，但是sessionStorage用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。还有sessionStorage和localStorage不参与浏览器通信，都受同源策略(协议、域名、端口一致)的影响，其中sessionStorage不能进行跨窗口状态共享，下面还会介绍。

sessionStorage和localStorage的相同点

操作方法

sessionStorage和localStorage都采用的是键值对(key-value)形式存储，所以在操作方法上基本一致。常用的方法如下：

方法名描述
key(n)返回存储对象中第n+1个键的名称，因为n 取值从 0开始
getItem(keyname)返回指定键的值
setItem(keyname, value)添加键和值，如果对应的值存在，则更新该键对应的值，没有返回值。
removeItem(keyname)移除键，没有返回值
clear()清除存储对象中所有的键，没有返回值

存储数据时

localStorage.setItem("name","张三")
localStorage.setItem("age",12)
let obj={
  a:12,
  b:"test"
}
localStorage.setItem("obj",obj)

会在本地存储空间看到

企业微信截图_1704771800418.png

我们会看到这个[object][object]，不知道是什么？然后使用 typeof localStorage.getItem("obj")得到结果是string 类型。原因是:localStorage.setItem存储引用类型的时候会转为字符串格式存储，类似引用类型直接调用toString()方法，此时是不能访问该对象任何属性，也没有方法将对象回显出来。还有typeof localStorage.getItem("age")得到的结果为string。所以我们可以知道localStorage和sessionStorage存放数据的时候采用键值对，但是存放的值的类型也是采用字符类型，如果不是字符型会将该值的类型转为string类型，并且采用的类似toString的方法。但在实际开发过程中我们都需要将保存的数据保持原来的数据类型和数据结构。
解决方案：存储字符类型的时候可以直接通过setItem(key,value)设置，但是存储其他非字符串类型的时候，可以采用JSON的方法帮助存储，使用JSON.stringify(value)将数据转为JSON字符串，再使用JSON.parse(value)将数据解析出来，此时数据会保持原来的数据结构与类型。

localStorage.setItem("obj",JSON.stringify(obj))
let obj=JSON.parse(localStorage.getItem("obj"))

localStorage和sessionStorage的使用

一般我们的业务开发中会有打开新标签页，或者打开另外一个网站的情况，如下我们使用a标签,window.open和window.replace等方法导航打开index1.html页面测试，其中index.html和index1.html是同源的本地文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h2>index页面</h2>
  <a href="./index1.html" target="_self" >_self跳转index1</a>
  <a href="./index1.html" target="_blank" >_blank跳转</a>
  <button>点击跳转</button>
  <script>
  sessionStorage.setItem("test","session")
  localStorage.setItem("test1","localsession")
  document.querySelector('button').addEventListener('click',function(){
    // window.open("./index1.html")
      window.location.replace("./index1.html")
  })
</script>
</body>
</html>

localStorage

localStorage会受到同源策略的影响，不同源的数据不能共享，但是浏览器打开多个同源窗口之后就可以在不同的浏览器tab标签页之间共享数据，如直接复制窗口的地址到新的浏览器标签页访问，也是可以访问的。
浏览器的差异：firefox浏览器是支持localStorage存储的，当我进行项目的调试后发现，localStorage在火狐上不能正常使用，getItem方法返回的是null，原因是我是在本地调试的。localStorage在Firefox当前的版本里，不支持file:\//的页面。于是我把前端项目文件放到了服务器环境。比如使用vscode安装dev-server插件。

sessionStorage

sessionStorage只能在浏览器的单个tab页里面存在，所以跳转到同窗口的同源的页面还是可以访问里面数据。但是如果在页面中使用window.open来打开新同源页面，那么新页面也可以获取到sessionStorage存储的值，这与sessionStorage只能在本窗口内共享存在矛盾。这是什么原因呢？然后我们把原来的窗口关闭，发现跳转过来的页面里面依然保存有sessionStorage值，所以说明window.open打开的新页面会将原来的页面的sessionStorage复制到下一个页面。
在浏览器中，使用_blank 方式新开窗口，sessionStorage 存储的数据会丢失。

常见的跳转方式

  1. <a href="同源页面" target="_self">跳转</a> 跳转原窗口，localStorage可以共享数据。sessionStorage共享数据
  2. <a href="同源页面" target="_blank">跳转</a>新开窗口，localStorage可以共享数据， sessionStorage不可以共享数据，也不能复制sessionStorage数据
  3. window.location.href = '同源页面'跳转原窗口，localStorage可以共享数据，sessionStorage可以共享数据
  4. window.location.replace('同源页面') 跳转原窗口，localStorage可以共享数据。sessionStorage共享数据
  5. window.open('同源页面')打开新开窗口localStorage可以共享数据，sessionStorage不可以共享数据，可以复制sessionStorage数据
avatar
文章
阅读
粉丝