HTML5本地存储

jopen 10年前

HTML5中的 Web Storage 包括两种存储方式： sessionStorage 和 localStorage 本地离线存储，同域下只能存储 5M 的空间；IE6.7中可以用 UserData 来实现

sessionStorage 用于本地存储一个会话(session)中的数据，这些数据只有在同个会话中的页面才能访问并且当会话结束后数据也随之销毁，因此 seesionStorage 不是一种持久化的本地存储，仅仅是会话级别的存储；

localStorage，用于持久化存储本地数据，如果不手动删除则会一直存在，就算把浏览器关了，清了浏览器缓存，关机等十天半个月再开，一样的存在；但是，它只是存在同一个域名下；

localStorage 和 sessionStorage操作

localStorage 和 sessionStorage 都具有相同的操作方法：

注意，下面 value 的值始终是字符串，即使传的是一个数字也会被转换成字符串

  • localStorage.setItem(“key”, “value”)，设置 key 的值为 value，如果 key 已经存在则更新其值为 value

    localStorage[“key”] = value，也可以这样设置值，不推荐

    localStorage.key = value，这样也行，不推荐

  • localStorage.getItem(“key”)，获取 key 的值，如果 key 不存在返回 null

    localStorage[“key”]，也可以这样获取值，不推荐

    localStorage.key，这样也可以获取值，不推荐

  • localStorage.removeItem(“key”)，删除 key 对应的数据

  • localStorage.clear()，清空所有 localStorage 保存的数据

  • localStorage.length，数据总量

  • localStorage.key(index)，获取 key

  • 存储 JSON 格式数据

    JSON.stringify(data)，将一个对象转换成 JSON 格式的数据串，返回转换后的串

    JSON.parse(data)，将数据解析成 js 对象，返回解析后的对象

  • HTML5 的本地存储，还提供了一个 storage 事件，可以对键值对的改变进行监听，如果我们同时打开了同域名下的多个页面，这时在其中一个页面中对 localStorage 有操作，那其它同域的页面就会触发这个事件

    对于事件对象 e，是一个 StorageEvent 对象，提供了一些实用的属性，可以很好的观察键值对的变化：

    • e.key，被修改的键名

    • e.oldValue，被修改的键对应的旧的值

    • e.newValue，被修改的键对应的新的值

    • e.url，解发 storage 事件的 url

    • e.storageArea，当前 Storage 的引用(session 或 local)