H5本地存储
本地存储
- 功能：数据持久化
原因：
- 浏览器访问服务器的无状态（不知道你是不是来过）、无连接（http请求<——>响应，类似发短信）
- 用户体验
cookie（H4）
- 在本地浏览器端有cookie空间存放数据，但主要由服务器操控，存放用户信息
- 存储少量的文本信息，最大4K
- 请求网页时携带在请求头里，自动发送到服务器（浪费带宽）
sessionStorage（H5 API）
- 特点
- 会话级别存储（只要没有关闭页面窗口，包括刷新和恢复页面，数据都存在）
- 数据的存储结构呈现键值对
- 一个域下面存储一份数据
- 语法（4个方法）
- 保存或修改数据：
sessionStorage.setItem("key","value") - 获取数据：
sessionStorage.getItem("key") - 删除数据：
sessionStorage.removeItem("key") - 删除所有数据：
sessionStorage.clear()
- 保存或修改数据：
- 注意
- 键和值只能字符串方式存储，如果要存取复杂数据类型需使用JSON格式转换
- 转字符串：
JSON.stringify() - 解析字符串：
JSON.parse()
- 转字符串：
- 使用get获取，如果没有相应数据，返回值为
null - 可在浏览器工具栏application中直接操作数据
- 键和值只能字符串方式存储，如果要存取复杂数据类型需使用JSON格式转换
localStorage（H5 API）
- 特点
- 永久存储
- 其它同sessionStorage
- 语法：同sessionStorage
三者的区别
-
传递方式
- cookie是浏览器与服务器之间自动来回传递
- sessionStorage和localStorage不自动传
-
数据大小
- cookie不超过4K
- sessionStorage和localStorage最大可达到5M
-
作用时间
- cookie是有过期时间的
- sessionStorage是会话级别的
- localStorage是永久存储
-
作用范围
- cookie和localStorage是同源窗口共享（同一文件域下）
- sessionStorage是每个窗口独立的，不能共享
-
注意：
- H5的本地存储接口，除了存储时间和作用范围，其它一模一样
- key和value只能存放字符串
补充了解
-
快捷操作手段：
- H5本地存储可直接通过API——localStorage或sessionStorage获取（直接用点key的方式）。
-
window.onStorage()事件- 本地存储是属于浏览器的，当本地存储数据发送改变时都会触发这个事件。
- 在当前页面的控制台改变本地存储数据，只会在其它同源页面触发Storage事件，而不在改变数据的当前页面触发。（在application里修改相当于在后台修改，不是在当前页面修改，所以会触发Storage事件）
- 在A页面修改后会触发B页面的Storage事件，可通过事件对象拿到新的数据
e.newValue，实现两个页面要同步显示一些信息
