23、H5新增js属性之本地存储

来源：互联网发布：烟台华商网络怎么样编辑：程序博客网时间：2024/04/30 05:15

H5新增js方法之本地存储

Storage

sessionStorage

session临时回话，从页面打开到页面关闭的时间段

窗口的临时存储，页面关闭，本地存储消失

localStorage

永久存储（可以手动删除数据）

Storage的特点

存储量限制 ( 5M )

客户端完成，不会请求服务器处理

sessionStorage数据是不共享、 localStorage共享

Storage API
  setItem():
      设置数据，(key,value)类型，类型都是字符串
      可以用获取属性的形式操作
  getItem():
      获取数据，通过key来获取到相应的value
  removeItem():
      删除数据，通过key来删除相应的value
  clear():
  删除全部存储的值

  存储事件:
      当数据有修改或删除的情况下，就会触发storage事件
      在对数据进行改变的窗口对象上是不会触发的
      Key : 修改或删除的key值，如果调用clear(),key为null
      newValue : 新设置的值，如果调用removeStorage(),key为null
      oldValue : 调用改变前的value值
      storageArea : 当前的storage对象
      url : 触发该脚本变化的文档的url
      注：session同窗口才可以,例子：iframe操作

<!doctype html><!--声明当前文档为html文档--><html lang="en"><!--语言为英语--><head><!--头部--><meta charset="UTF-8"><!--字符编码：utf-8国际编码  gb2312中文编码--><meta name="Keywords" content="关键词"><meta name="Description" content="描述"><title>Document</title><style>/*css样式表的衣柜*/</style></head><body><!--身体--><input type="button" value="添加数据" id="btn1"><input type="button" value="获取数据" id="btn2"><input type="button" value="删除数据" id="btn3"><input type="text" id="txt"><script>var btn1 = document.getElementById("btn1");var btn2 = document.getElementById("btn2");var btn3 = document.getElementById("btn3");var txt = document.getElementById("txt");//添加数据btn1.onclick = function(){sessionStorage.setItem("key",txt.value);}//获取数据btn2.onclick = function(){var val = sessionStorage.getItem("key");alert(val);}//删除数据btn3.onclick = function(){sessionStorage.removeItem("key");}</script></body></html>

<!doctype html><!--声明当前文档为html文档--><html lang="en"><!--语言为英语--><head><!--头部--><meta charset="UTF-8"><!--字符编码：utf-8国际编码  gb2312中文编码--><meta name="Keywords" content="关键词"><meta name="Description" content="描述"><title>Document</title><style>/*css样式表的衣柜*/#div{width:400px;height:400px;border:1px solid red;}</style></head><body><!--身体--><input type="button" value="请求" id="btn"><div id="div"></div><script>var btn = document.getElementById("btn");var div = document.getElementById("div");var time = null;btn.onclick = function(){//alert(1);time = navigator.geolocation.watchPosition(function(position){//alert(position.coords.longitude);div.innerHTML += "经度:"+ position.coords.longitude + "\n";div.innerHTML += "纬度:"+ position.coords.latitude + "\n";div.innerHTML += "准确度:"+ position.coords.accuracy + "\n";div.innerHTML += "海拔准确度 :"+ position.coords.altitudeAcuracy + "\n";div.innerHTML += "行进方向:"+ position.coords.heading + "\n";div.innerHTML += "地面速度:"+ position.coords.speed + "\n";div.innerHTML += "请求的时间:"+ new Date(position.timestamp);},function(err){alert(err.code);//navigator.geolocation.clearWatch(time);},{enableHighAcuracy : true,timeout : 5000,maximumAge : 5000,frequency : 1000});}</script></body></html>

类似同步购物车;

<!doctype html><!--声明当前文档为html文档--><html lang="en"><!--语言为英语--><head><!--头部--><meta charset="UTF-8"><!--字符编码：utf-8国际编码  gb2312中文编码--><meta name="Keywords" content="关键词"><meta name="Description" content="描述"><title>Document</title><style>/*css样式表的衣柜*/</style></head><body><!--身体--><input type="checkbox" value="张三" >张三</br><input type="checkbox" value="李四" >李四</br><input type="checkbox" value="王五" >王五</br><input type="checkbox" value="陈麻子" >陈麻子</br></body><script>var oInput = document.getElementsByTagName("input");for (var i=0;i<oInput.length ;i++ ){oInput[i].onclick = function(){if (this.checked){window.localStorage.setItem("chec",this.value);}else{window.localStorage.setItem("onchec",this.value);}}}window.addEventListener("storage",function(ev){if (ev.key == "chec"){for (var i=0;i<oInput.length ;i++  ){if (ev.newValue == oInput[i].value){oInput[i].checked = true;}}}else if(ev.key == "onchec"){for (var i=0;i<oInput.length ;i++  ){if (ev.newValue == oInput[i].value){oInput[i].checked = false;}}}},false);</script></html>

0 0