Web Storage 本地存储localStorage

最新推荐文章于 2023-01-03 14:15:42 发布

郭浩326

最新推荐文章于 2023-01-03 14:15:42 发布

阅读量288

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/guohao326/article/details/72955043

版权

javascript 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

<!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>

郭浩326

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web Storage 本地存储localStorage

保存数据获取数据window.onload = function() {/* * 当你关闭此页面或者关闭浏览器的时候，localStorage中保存的数据才会消失， * 也就是说重新打开此页面的时候，点击获取数据，可以取到数据。 * localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage
复制链接

扫一扫