HTML5的web数据存储

一，web数据存储

就是让网页的数据在计算机上存储一段时间，可以是临时存储也可以是长期存储，如cookie

数据存储分为两种

1.1本地存储

对应localStorage对象，用于长期保存网站的数据，如有的网页登录密码保存一周等

2.2会话存储

对应sessionStorage对象，用于临时保存，浏览器关闭数据也就没了

大多数浏览器都把本地存储限制为5MB以下

---

二，存储数据

假设你想存储一个用户名，那么这个名字叫“name”，你可以在文本框输入文本并弹窗读出你之前写的用户名

 var userinput = document.getElementById("userinput");
    var btn = document.getElementsByTagName("input")[1];
  
    
    btn.onclick = function(){
        localStorage["name"] = userinput.value;
        alert("名字是"+localStorage["name"]);
    }

例

而会话存储就是把localStorage换成sessionStorage。
举例如迷宫游戏中,用户每次关闭页面在重新打开页面时页面提示保存当前位置,那么就可以存储在localstorage中来记录位置

迷宫游戏

web存储支持情况

浏览器	IE	Firefox	Chrome	safari	opera	safari ios	Android
版本	8	3.5	5	4	10.5	2	2

三,删除数据

• removeItem()方法 里面传入键名就可以删除不想要的数据

localStorage.removeItem("name")

• clear()方法 清空本地保存会话数据

---

四，查找所以数据项

• key（）方法

btn3.onclick = function(){
        var ul = document.getElementsByTagName("ul")[0];
        ul.innerHTML = " ";
        for(var i=0;i<localStorage.length;i++){
            //取当前数据项的键
            var key = localStorage.key(i);
            //获取数据项的值
            var val = localStorage[key];

            var oli = document.createElement("li");
            oli.innerHTML = key+":"+val;
            ul.appendChild(oli); 
        }
    }

image.png

注意web存储数据会自动转换为文本

• 对于数字而言
  用number（）函数来处理

Number(localStorage[val])

• 对于日期而言
  会保存一串字符串

today = new Date(sessionStorage [time]);

五，web保存对象

web存储数字和日期会自动转换为文本，那么自定义的对象怎么转换呢

为了把自定义对象存储web中，必须先把对象转换为文本形式，所以JSON编码诞生
JSON（JavaScript Object Notation）对象表示方法，是一种对象转换文本的简便格式

5.1JSON.stringify()将对象转换为文本

5.2 JSON.parse() 将文本转换为对象

如果你想将对象放在在web存储中，那么就使用json,stringify(value)方法将值放在web存储(local,session)中,然后再从会话存储中取出用json.parse(value)方法将其转换为对象

六，响应存储变化

就是浏览器不同窗口间的通信机制，简单来说就像我和你打视频电话，我这边的一举一动都会在你的显示器上展示出来
这里就如两个页面，第一个页面我要添加名字，那么第二个页面很快就显示出来你在第一个页面中添加的名字
那么这就是window.onstorage事件
就是你在1.html页面中改变了本地存储，那么在2.html的页面中会触发onStorage事件（必须是同台计算机相同浏览器打开的页面）

image.png
那么我在点击添加按钮时，第二个页面就显示出来了结果
image.png

当然上面两个图片涉及两个页面
第一个页面负责保存数据到本地存储

   键:<input type="text" id="key"><br>
    值:<input type="text" id="value1"><br>
    <input type="button" id="btn" value="添加" onclick="addValue()">
    <script>
      
        function addValue(){
        var key = document.getElementById("key").value;
        var value1 = document.getElementById("value1").value;
        var btn = document.getElementById("btn");
        //保存数据项
        localStorage[key] = value1;   
        }
    </script>

第二个就是在页面加载中为window.onStorage
添加一个处理函数

  <div id="update"></div>
    <script> 
    function storageChanged(e){
                var message = document.getElementById("update")
                message.innerHTML+="<br>key:"+e.key;
                message.innerHTML +="<br>value:"+e.newValue;
            }
           
        window.onload = function(){
            //将storage和storageChanged两个函数连接起来
            window.addEventListener("storage",storageChanged,false)
        } 
        
       
    </script>

当然在onStorage中也提供了许多api
原来的值oldValue
新值newValue
导致此次变化的页面URL