Web Storage 本地存储localStorage

来源：互联网发布：淘宝网买东西的步骤编辑：程序博客网时间：2024/06/06 09:49
<!DOCTYPE HTML><html><head>  <meta charset="utf-8">  <title></title></head><body><input id="msg" type="text" /><button id="setData">保存数据</button><button id="getData">获取数据</button><script type="text/javascript">  window.onload = function() {    /*                      * 当你关闭此页面或者关闭浏览器的时候，localStorage中保存的数据才会消失，     * 也就是说重新打开此页面的时候，点击获取数据，可以取到数据。     * localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同     ***************************************     *localStorage的局限     *1、浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性     *2、目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换     *3、localStorage在浏览器的隐私模式下面是不可读取的     *4、localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡     *5、localStorage不能被爬虫抓取到     *localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储，     *而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空     *localStorage.removeItem(“username”)     *删除指定的一条存储信息     *localStorage.clear();     *清除所有的存储信息     */    //首先获得body中的3个input元素    var msg = document.getElementById("msg");    var getData = document.getElementById("getData");    var setData = document.getElementById("setData");    setData.onclick = function() {//存入数据      if(msg.value) {        localStorage.setItem("data", msg.value);        alert("信息已保存到data字段中");      } else {        alert("信息不能为空");      }    }    getData.onclick = function(){//获取数据      var msg = localStorage.getItem("data");      if(msg) {        alert("data字段中的值为：" + msg);      } else {        alert("data字段无值！");      }    }  }</script></body></html>
阅读全文
0 0