web/前端存储以及跨文档页面传输

目录

web/前端存储

1.cookie

操作以及方法

创建 cookie

移除cookie 

 2.localStorage（本地存储）

设置本地存储

获取本地存储

移除本地存储

全部移除 

3.sessionStorage（会话存储）

设置会话存储

获取存储内容

 清除会话存储

清除所有

跨文档页面传输

1.通过a标签传输数据到另一个页面

 2.通过事件将数据传到另一个页面

A页面

设置按钮

获取按钮

给按钮绑定事件

B页面

接收数据

---

web/前端存储

1.cookie

特点：

a.产生于服务器端，保存在客户端

b.同一服务器的cookie是共享的

c.传输速率最大4kb

操作以及方法

引入库

例如：

在线引入

  <script src="https://cdn.bootcdn.net/ajax/libs/js-cookie/3.0.1/js.cookie.min.js"></script>

创建 cookie

Cookies.set("名称","内容",{ expires: 过期时间})

例如：

Cookies.set("name","this is a test cookie",{ expires: 7 })

移除cookie 

Cookies.remove('名称')

例如：

Cookies.remove('name')

 2.localStorage（本地存储）

特点：

a.将数据存储到本地磁盘 即使选项卡和浏览器关闭数据依旧存在

b.除非手动删除 否则数据一直存在本地磁盘中

c.传输的数据大小达到5M甚至更大

设置本地存储

localStorage.setItem('名称', '内容')

例如：

localStorage.setItem('name', '产品名称')

获取本地存储

localStorage.getItem('名称') 

例如：

localStorage.getItem('age')

移除本地存储

removeItem('名称') 

例如：

removeItem('age')

全部移除 

 localStorage.clear()

3.sessionStorage（会话存储）

特点：

a.页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。
b.打开多个相同的URL的Tabs页面，会创建各自的sessionStorage。
c.关闭对应浏览器tab，会清除对应的sessionStorage。

设置会话存储

sessionStorage.setItem('名称', '内容')

例如：

sessionStorage.setItem('test', 'terry')

获取存储内容

sessionStorage.getItem('名称')

例如：

sessionStorage.getItem('test')

 清除会话存储

sessionStorage.removeItem('名称')

sessionStorage.removeItem('name')

清除所有

sessionStorage.clear()

跨文档页面传输

1.通过a标签传输数据到另一个页面

1.1创建页面A

设置a标签

<a href="./B页面.html?name=zhangsan&age=12">跳转B页面</a>

1.2创建B页面

        1.21  通过 location接收数据

                 var str = location.search

                 去掉问号

                 str = str.slice(1)

        1.22 将查询字符串转成js对象

         方法一：利用第三方库  Qs.parse()

         方法二： 

        str = str.split('&')

        str = str.map(function (item) {

              return item.split('=')

            })

         var obj = {}

         str.forEach(function (item) {

              obj[item[0]] = item[1]

    })

 2.通过事件将数据传到另一个页面

A页面

设置按钮

<button>打开B1页面</button>

<button>发送数据</button>

<button>使用内联框架发送数据</button>

获取按钮

var btn = document.querySelector('button')

var btn2 = document.getElementsByTagName('button')[1]

var btn3 = document.getElementsByTagName('button')[2]

给按钮绑定事件

btn.onclick = function () {

        // 返回打开页面的窗口对象

        win = window.open('./B1页面.html')

      }

btn2.onclick = function () {

        // 发送数据 参数：要发送的数据 发送到哪一个地址

        // 'http://127.0.0.1:5500'

        win.postMessage('hello', '*')

      }

btn3.onclick = function () {
        // 获取内联框架的窗口-->B1页面
        win = document.querySelector('iframe').contentWindow
      }

 

B页面

接收数据
 

 window.onmessage = function (event) {

      // 接收数据

      console.log(event.data);

      // 地址来源

      console.log(event.origin);

    }