关于浏览器存储问题理解

Posted 2020-10-13

　　web应用允许使用浏览器提供的API实现将数据储存在用户的电脑上，这种客户存储相当于赋予了Web浏览器记忆功能，web应用可以通过这种方式来“记住”用户的偏好甚至是用户所有的状态信息，一遍“回忆”起用户上一次访问客户端存储遵循“同源策略”，因此不同站点的页面无法互相读取对方储存的数据，而同一站点的不同页面之间是可以显示在另外一个页面中，web应用可以选择它们存储数据的有效期：比如采用临时储存可以让数据保存至当前窗口关闭或者浏览器退出：采用永久储存，可以将数据永久地储存在硬盘上，数年或者数月不失效  -- 以上摘自javascript权威指南_第六版

客户端存储方式有一下几种：

Web存储：Web存储标准所描述的API包含localStorage对象和sessionStorage对象，这两个对象实际上是持久化关联数组，是名值对的映射表，“名”和“值”都是字符串

　　现在来具体了解一下localStorage和sessionStorage

　　下面让我们来看一些例子

var name = localStorage.username;  // 查询一个存储的值
name ＝ localStorage["username"];  // 等价于数组表示方法
if(!name) {
  name = prompt("What is your name?"); //询问用户一个问题
  localStorage.username = name     //  存储用户的答案
}
// 迭代所有存储的name/value 对
for(var name in localStorage) {       //  迭代所有存储的名字
  var value = localStorage[name]    //   查询每个名字对应的值   
}

 　　“Web存储”草案标准指出，我们既可以存储结构化的数据（对象和数组），也可以存储原始类型数据，还可以存储如日期，正则表达式设置文件对象内的内置类型的数据，但是目前浏览器仅仅支持存储字符串类型数据，如果想要在存储和获取其它类型的数据，不得不自己动手进行编码和解码　　

　　现在来理解一下存储有效期和作用域

　　localStorage和sessionStorage两者的区别在于存储的有效期和作用域不同-->数据可以存储多长时间以及谁拥有的数据访问权

　　localStorage存储数据是永久性的，除非Web应用可以删除存储的数据，或者用户通过设置浏览器的配置（浏览器提供的特定UI）来删除，否则数据将一直保留在用户的电脑上，永不过期

　　localStorage的作用域是限定在文档源级别的，文档源是通过协议、主机名以及端口三者来确定的，同样的文件间共享同样的localStorage数据，（不论该源的脚本是否真正的访问localStorage）。它们可以互相读取对方的数据，甚至可以覆盖对方的数据。但是非同源的文档间互相都不能读取或者覆盖对方的数据，?? 注意 localStorage的作用域也受浏览器供应商的限制，如果你使用Fierfox访问站点，那么下次用另一个浏览器（比如，Chrome）再次访问的时候，那么本次是无法获取上次存储的数据的

http:// www.example.com            // 协议：http；主机名：www.example.com
http://www.example.com             // 不同协议
http://static.example.com            // 不同主机名
http://www.example.com:8000    // 不同端口

 

　　sessionStorage存储的数据的有效期和存储数据的脚本所在的最顶层窗口活着浏览器标签页是一样的，一旦窗口活着标签页被永久关闭了，那么所有通过sessionStorage存储的数据也都被删除了　　　

　　sessionStorage和localStorage一样，sessionStorage的作用于也是限定在文档源中的，不仅如此，sessionStorage的作用域还被限定在窗口中，如果同源文档渲染在不同的浏览器标签页中，那么它们之间互相拥有的是格子的sessionStorage数据，无法共享；一个标签页中的脚本是无法读取活着覆盖由另一个标签脚本写入的数据，哪怕这两个标签也渲染的是同一个页面，运行的是同一个脚本也不行 ?? 注意：这里提到的基于窗口作用域的sessionStorage指的是窗口知识顶级窗口。如果一个浏览器标签也包含两个<iframe>元素，它们所班汉的文档是同源的，那么两者之间是可以共享sessionStorage的

　　存储API

　　localStorage和sessionStorage通常被当作普通的Javascript对象使用；通过设置属性来存储字符串值，查询该属性来读取该值，除此之外，这两个对象还提供了更加正式的API

　　调用setItem()方法，将对应用的名字和值传递进去，可以实现数据存储

　　调用getItem()方法，将名字传递进去，可以获取对应的值

　　调用removeItem()方法，将名字传递进去，可以删除数据

　　调用clear()方法，可以删除所有存储的数据

　　使用length属性以及key()方法，传入0～length－1的数字，可以枚举所有存储数据的名字

　　

cookie：cookie是一种早期的客户端存储机制，起初是针对服务器脚本设计使用，尽管在客户端提供了非常繁琐的javascript API来操作cookie，但它们难用至极，而且只适合存储少量文本数据，不仅如此，任何以cookie形式存储的数据，不论服务器端是否需要，每一次HTTP请求都会把这些数据传输到服务器端，cookie面前仍然被客户端程序员使用的一个重要的原因是：所有新旧浏览器都支持它

IE User Data

离线Web应用：html5标准中定义了一组“离线Web应用”API ，用以缓存Web页面以及相关资源。它实现的是将Web应用整体存储在客户端，不经仅是存储数据，它能够让Web应用“安装”在客户端，这样依赖，哪怕网络不可用的时候，Web应用依然是可用的

Web数据库

文件系统API

　　　　　　　　　　　　　　　　　　------------ 以上来自javascript权威指南学习