html5之本地存储-优快云博客

本文深入探讨webStorage技术，详细介绍了sessionStorage和localStorage的用途、方法、属性和事件，包括如何设置、获取、删除数据以及本地存储的兼容性问题。同时，文章还提供了针对不同浏览器的解决方案，如通过监听storage事件实现在多tab页面间的交互。

2019独角兽企业重金招聘Python工程师标准>>>

前言

web Storage

sessionStorage(临时保存)

所谓session，就是用户再浏览网站的时候，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览了这个网站所花费的时间，session对象可以用来保存这段时间内所要求保存的任何数据。

localStorage(永久保存)

将数据保存在客户端本地的硬件设备上。

方法

setItem(key,value) 设置key

getItem(key) 获取key

removeItem(key) 移除掉 key

clear() 清除所有数据

key(n) 获取到第N个数据对象

属性

length : 长度

事件

storage事件

PS:IE8不支持storage事件，window8 下面的IE10 默认不开启localstorage 功能。

页面必须来自同一个域名（子域名无效），使用同一种协议，在同一个端口上。

可以通过监听storage事件实现多tab页面的交互事件

if(window.addEventListener){
    window.addEventListener("storage",handle_storage,false);
}
else if(window.attachEvent){
    window.attachEvent("onstorage",handle_storage);
}

// 对于data数据有：
function handle_storage(data){
    
}

ps:本人在IE8下面测试的，尼玛，居然不支持。

针对于IE的话，可以使用userData来实现本地存储。

兼容性