JavaScript 本地存储

1.前言

• 由来：localStorage和sessionStorage是 HTML5 标准中新加入的技术，用于保存整个网站的数据
• 两者区别：localStorage的生命周期是永久的，除非手动删除，而sessionStorage仅在当前会话下有效（即使是同个域名下的网页也无法访问当前会话下创建的键值对，关闭页面或浏览器后被清除，刷新当前会话不会删除键值对）
• 特点：localStorage和sessionStorage最大一般为5MB，仅在客户端（即浏览器）中保存，不参与和服务器的通信

2.操作

• localStorage，sessionStorage可使用的API都相同

方法	说明	调用者
setItem(key,value)	设置数据	localStorage，sessionStorage
getItem(key)	获取数据	localStorage，sessionStorage
removeItem(key)	移除某个数据	localStorage，sessionStorage
clear()	清除所有数据	localStorage，sessionStorage

• 代码演示

<script>
    // 添加数据
    window.localStorage.setItem("name","张三")
    window.localStorage.setItem("age",20)
    window.localStorage.setItem("gender","男")
    // 获取数据
    console.log(window.localStorage.getItem("name")) // 张三
    // 清除某个数据
    window.localStorage.removeItem("gender")
    // 清空所有数据
    window.localStorage.clear()
</script>

• 在浏览器中查看已经存储的值
  

• 数据遍历：key()和length配合可以遍历存储的数据

<script>
    // 添加数据
    window.localStorage.setItem("name","李四")
    window.localStorage.setItem("age",18)
    var storage = window.localStorage;
    // 遍历数据
    for(var i=0, len=storage.length; i<len;i++){
        //调用key()传入下标
        var key = storage.key(i);     
        var value = storage.getItem(key);     
        console.log(key + "=" + value); 
    }
</script>