javascript - HTML5中我们如何找到LocalStorage的各种属性

Question

为了计算java脚本中的点击次数，我看到一些示例代码使用localStorage.clickcount，这段代码运行得很好，但是我们如何才能了解 localStorage 中存在的所有属性，以便开发人员可以使用它们。我们如何知道JS中localstorage类的所有属性和方法是什么。

Answer 1

在你提到的代码中

localStorage.clickCount

clickCount 是用户定义的属性，用于存储点击次数。您可以添加和删除您的属性。

设置属性

localStorage.myProperty   = "Hello World";

获取属性您可以从 sessionStorage 和 localStorage 对象获取属性，如下所示:

var myProp = localStorage.myProperty;

如果属性名称不是有效的 JavaScript 变量名称，则需要使用方括号访问方法，如下所示:

var myProp = localStorage["myProperty"];

或者您可以使用 getItem() 函数，如下所示:var myProp = localStorage.getItem("myProperty");

删除属性您可以像这样删除 session 或本地存储属性:

delete localStorage.myProperty;

或者您可以使用removeItem()函数，如下所示:

sessionStorage.removeItem ("myProperty");

清除本地存储如果要删除sessionStorage或localStorage对象中存储的所有属性，可以使用clear()函数。这是一个clear()函数调用示例:

localStorage.clear();

读取存储的属性数量您可以使用 length 属性读取存储在 sessionStorage 或 localStorage 对象中的属性数量，如下所示:

var length = sessionStorage.length;

var length = localStorage.length;

迭代本地存储中的键您可以迭代存储在 sessionStorage 或 localStorage 中的键值对的键(属性名称)，如下所示:

for(var i=0; i < sessionStorage.length; i++){

    var propertyName = sessionStorage.key(i);

    console.log(  i + " : " + propertyName + " = " +
            sessionStorage.getItem(propertyName));
}

sessionStorage.length 属性返回存储在 sessionStorage 对象中的属性数量。

函数 key() 返回属性的属性名称(或键名称)，并将索引作为参数传递给函数。

您可以用相同的方式迭代 localStorage 的键。只需将上例中的 sessionStorage 对象与 localStorage 对象交换即可。

本地存储事件当您修改 sessionStorage 或 localStorage 时，浏览器会触发存储事件。当您插入、更新或删除 sessionStorage 或 localStorage 属性时，会触发存储事件。

存储事件仅在执行修改的窗口之外的其他浏览器窗口中发出。对于 sessionStorage，这意味着事件仅在弹出窗口和 iframe 中可见，因为每个浏览器窗口都有自己的 sessionStorage 对象。

对于跨浏览器窗口共享的 localStorage 对象，事件对于所有其他同源(协议(protocol)+域名)打开的窗口都是可见的，包括弹出窗口和 iframe。

附加存储事件监听器

将事件监听器附加到本地存储对象是这样完成的:

function onStorageEvent(storageEvent){

    alert("storage event");
}

window.addEventListener('storage', onStorageEvent, false);

函数onStorageEvent()是事件处理函数。

addEventListener() 函数调用将事件处理函数附加到存储事件。

传递给事件处理函数的 storageEvent 事件对象如下所示:

StorageEvent {
    key;          // name of the property set, changed etc.
    oldValue;     // old value of property before change
    newValue;     // new value of property after change
    url;          // url of page that made the change
    storageArea;  // localStorage or sessionStorage,
                  // depending on where the change happened.
}

您可以从事件处理函数内部访问此存储事件对象。