HTML5客户端存储Web Storage

ゝ一世哀愁。 2022-05-11 01:04 378阅读 0赞

**1. Web Storage**

**支持情况：IE8以上的主流浏览器都支持Web Storage，IOS平台和Android平台对Web Storage都有很好的支持。**

localStorage：存储在本地磁盘，永久存储。sessionStorage：临时存储，数据保存在浏览器内存中，当浏览器关闭，内存将被自动清除。

**Web Storage特点：**

（1）设置和读取数据方便

（2）容量大，sessionStorage约5M，localStorage约20M

（3）只能存储字符串，如果要存储JSON对象，可通过JSON.stringify()和JSON.parse()方法进行转换

**2. 存储方法：**（l**ocalStorage和sessionStorage的用法一样，拿localStorage举例**）

（1）存储属性名和属性值

![70][]

![70 1][]

（2）storage存储的值是字符串，要是存储对象，要用json格式存入，取出后再进行转换

![70 2][]

![70 3][]

**3. 取出storage中的数据**

![70 4][]

![70 5][]

注意：storage存储值后，localStorage会永久存在本地，除非清除；而sessionStorage临时存储，关闭该浏览器的窗口就清除

注意：JSON.stringify()和JSON.parse()方法的使用

**4. 作用域**

（1）都受同源策略的限制

（2）都受文档源的限制

storage缓存机制是：首先，缓存值存在本地计算机中；本地中是按浏览器（Google Chrome | IE | 火狐），然后同一个浏览器下（不同浏览器生成不同文件夹）按不同的服务器（不同服务器百度、腾讯、淘宝等生成不同文件夹）存储storage值。

当我的电脑通过浏览器建立本机的缓存值时，任何一个通过该形式创建的页面，都可以获取到本机的缓存值，因为我的电脑就是一个特定的服务器，而在我的电脑下创建的任何文件.html，他们之间的storage值是相互可以获取的

![70 6][]

![70 7][]

（3）sessionStorage还受到窗口限制

sessionStorage只在本窗口下有效，即本html文件下的sessionStorage不可以被其他html文件获取。

**5. storage封装的api：**

<table style="width:691px;"> 
 <tbody> 
  <tr> 
   <td>方法和属性</td> 
   <td style="width:554px;"> <p>描述</p> </td> 
  </tr> 
  <tr> 
   <td>setItem(key, value)</td> 
   <td style="width:554px;">设置一个键值对，如果键存在，则更新其对应的值</td> 
  </tr> 
  <tr> 
   <td>getItem(key)</td> 
   <td style="width:554px;">获得键所对应的值</td> 
  </tr> 
  <tr> 
   <td>removeItem(key)</td> 
   <td style="width:554px;">移除删除某个键</td> 
  </tr> 
  <tr> 
   <td>key(n)</td> 
   <td style="width:554px;">得到第n位（0,1,2,3，，，）key的名称</td> 
  </tr> 
  <tr> 
   <td>clear()</td> 
   <td style="width:554px;">清除当前域名下所有的localStorage或sessionStorage内容</td> 
  </tr> 
  <tr> 
   <td>length属性</td> 
   <td style="width:554px;">storage中键值对的数量（1,2,3，，，）</td> 
  </tr> 
 </tbody> 
</table>

（1）getItem和setItem

![70 8][]

![70 9][]

（2）removeItem

![70 10][]

![70 11][]

（3）clear

![70 12][]

![70 13][]

**6. storage和cookie的区别：**

![70 14][]

**7. sessionStorage特别之处：**

在JavaScript语言中可通过 window.sessionStorage 或 sessionStorage 调用此对象。

引入了“浏览器窗口”的概念，sessionStorage在同源同窗口中始终存在数据，**只要这个浏览器窗口没有关闭**，即使**刷新页面**或者**通过该窗口 “进入同源的另一个窗口页面”**或者**“该窗口下同源的另一个页面”**，数据任然存在，只有在关闭窗口后，该窗口下的sessionStorage被销毁。

**解释：（1）刷新页面，sessionStorage的数据还在。**

**（2）该窗口下，进入同源的另一个页面：比如a标签，target = \_self，sessionStorage对象下的值还是存在的**

**（3）从该A窗口下，进入另一个B窗口的任何的同源页面，B窗口下sessionStorage对象下的值还是存在的，而且，值与A窗口下的值相等。当然，B窗口下的sessionStorage对象也是新的，此时修改A或者B窗口的sessionStorage对象的值，它们之间互不影响。因为是不同window对象的sessionStorage对象，只是B窗口的初始sessionStorage对象的值与A窗口的相等罢了。**

**（4）同时“独立”的打开的不同窗口，即使是同一个页面，sessionStorage对象也是不同的。**

**8. Storage事件监听**

在使用Web Storage存储数据的时候，当存储的数据发生变化时，会触发window对象的storage事件，通过监听该事件并对其指定处理函数，可以实现同源的多个窗口之间的通信。

**浏览器同时打开一个域名下的多个页面，当其中一个页面的localStorage对象或者sessionStorage对象的数据发生改变时，其他页面会触发storage事件，而原始页面不触发storage事件。IE浏览器除外，它会在所有页面触发storage事件。**

**注意：storage是window对象上的事件**

比如：

window.addEventListener("storage", function(event) {
          console.log(event.key + " " + event.newValue)
        })

在事件处理函数中，回调函数接收一个event对象作为参数，event对象上有一些属性，如下表：

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>属性</td> 
   <td>描述</td> 
  </tr> 
  <tr> 
   <td>event.key</td> 
   <td>sessionStorage或localStorage中被修改的键</td> 
  </tr> 
  <tr> 
   <td>event.oldValue</td> 
   <td>sessionStorage或localStorage中被修改前的值</td> 
  </tr> 
  <tr> 
   <td>event.newValue</td> 
   <td>sessionStorage或localStorage中被修改后的值</td> 
  </tr> 
  <tr> 
   <td>event.url</td> 
   <td>sessionStorage或localStorage中被修改时的url地址</td> 
  </tr> 
  <tr> 
   <td>event.storageArea</td> 
   <td>变动的sessionStorage或localStorage</td> 
  </tr> 
 </tbody> 
</table>

[70]: /images/20220511/d5b446ccbae54093a4f0df39872e7f6a.png
[70 1]: /images/20220511/1da7d493169d495292bd607a74334fc4.png
[70 2]: /images/20220511/5db1420992d6434e9d0bdf317f1dd029.png
[70 3]: /images/20220511/dc59507eb7844f26a0c79adda942556d.png
[70 4]: /images/20220511/e24084f22d55440ba08eb155cc114c84.png
[70 5]: /images/20220511/db995866222144349f42c6f21bee9842.png
[70 6]: /images/20220511/a2e734f39f51429f91abb73b9a985cb5.png
[70 7]: /images/20220511/6aff8acb9c7846e9938bf866357fbf43.png
[70 8]: /images/20220511/f7b5e375cf3d497db4f6ebc97042a476.png
[70 9]: /images/20220511/10636d02ab244eb8bef4a2ca4a5636e4.png
[70 10]: /images/20220511/b529a6cda16b4139ab747fbf79b9deee.png
[70 11]: /images/20220511/c4c03f4fdaef4a6fad2373ea1c39fbf1.png
[70 12]: /images/20220511/dc1ec3f9e90946de8402e1f88ba2c8c7.png
[70 13]: /images/20220511/225bdb511a7844e3826ac951cac4f8f6.png
[70 14]: /images/20220511/2c292e560a7e42cf9182a9e5470aaa90.png