localStorage

localStorage

localStorage 与[sessionStorage](https://developer.mozilla.org/en-US/docs/Web/API/sessionStorage) 一样，都遵循同源策略，但是它是持续存在的。localStorage 首次出现于 Firefox 3.5。

当浏览器进入隐私浏览模式，会创建一个新的、临时的数据库来存储local storage的数据；当关闭隐私浏览模式时，该数据库将被清空并丢弃。

ps: 目前项目中，开启无痕浏览时，获取不到localStorage设置的值，对上面新的、临时的数据库不理解？

应注意，无论数据存储在 localStorage 还是 sessionStorage ，它们都特定于页面的协议。

localStorage 中的键值对总是以字符串的形式存储。 (需要注意, 和js对象相比, 键值对总是以字符串的形式存储意味着数值类型会自动转化为字符串类型)。

检测浏览器支持

function storageAvailable(type) {
    var storage;
    try {
        storage = window[type];
        var x = '__storage_test__';
        storage.setItem(x, x);
        storage.removeItem(x);
        return true;
    }
    catch(e) {
        return e instanceof DOMException && (
            // everything except Firefox
            e.code === 22 ||
            // Firefox
            e.code === 1014 ||
            // test name field too, because code might not be present
            // everything except Firefox
            e.name === 'QuotaExceededError' ||
            // Firefox
            e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
            // acknowledge QuotaExceededError only if there's something already stored
            (storage && storage.length !== 0);
    }
}

使用：

if (storageAvailable('localStorage')) {
  // Yippee! We can use localStorage awesomeness
}
else {
  // Too bad, no localStorage for us
}

可以使用storageAvailable('sessionStorage')检测sessionStorage。

方法

localStorage.setItem()，localStorage.getItem()，localStorage.removeItem()，localStorage.clear()

// 设置值
localStorage.myCat = 'Tom'; 
localStorage['myCat'] = 'Tom'; 
localStorage.setItem('myCat', 'Tom');
// 获取值
localStorage.myCat;            // 'Tom' 
localStorage['myCat'];         // 'Tom' 
localStorage.getItem('myCat'); // 'Tom'

官方建议使用 setItem, getItem, removeItem 这些API，来防止与使用普通对象作为键值存储相关的 陷阱。

为 localStorage 设置过期时间

function set(key,value){
  var curtime = new Date().getTime();//获取当前时间
  localStorage.setItem(key,JSON.stringify({val:value,time:curtime}));//转换成json字符串序列
}
function get(key,exp)//exp是设置的过期时间
{
  var val = localStorage.getItem(key);//获取存储的元素
  var dataobj = JSON.parse(val);//解析出json对象
  if(new Date().getTime() - dataobj.time > exp)//如果当前时间-减去存储的元素在创建时候设置的时间 > 过期时间
  {
    console.log("expires");//提示过期
  }
  else{
    console.log("val="+dataobj.val);
  }
}

storage 事件

当存储数据发生变化时，会触发 storage 事件。值得特别注意的是，该事件不在导致数据变化的当前页面触发。如果浏览器同时打开一个域名下面的多个页面，当其中的一个页面改变 sessionStorage 或 localStorage 的数据时，其他所有页面的storage事件会被触发，而原始页面并不触发 storage 事件。可以通过这种机制，实现多个窗口之间的通信。（当然 ie 这个特例除外，它包含自己本事也会触发 storage 事件）。 例如我们全局下监听 storage 事件

window.addEventListener("storage",function onStorageChange(event) {
    // event 对象中几个主要属性：
    console.log(event.key); //更新值得键
    console.log(event.oldValue); //更新前的值。如果该键为新增加，则这个属性为null。 
    console.log(event.newValue); //更新后的值。如果该键被删除，则这个属性为null。
    // 如果 Storage 调用的是 clear 方法，则事件中的 key 、oldValue 、newValue 都是为 null
    console.log(event.url); //原始触发storage事件的那个网页的网址。
});

参考

https://developer.mozilla.org/zh-CN/docs/Web/API/Storage/LocalStorage
https://www.html.cn/archives/10169