javascript - H5 localstorage
迷茫
迷茫 2017-04-11 10:25:58
[JavaScript讨论组]

图中左边的的input的val值为对应下标th列的宽度,可以手动调节,但是调节过后怎么存储他们的值,这样下次登陆(或者刷新)这个界面就是上一次设置好的值。

迷茫
迷茫

业精于勤,荒于嬉;行成于思,毁于随。

全部回复(4)
PHP中文网

谢邀~

这个还没解决吗?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="jquery.min.js"></script>
  <style>
    .item{
      background: green;
      color: white;
      height: 50px;
      width: 50px;
      display: inline-block;
      text-align: center;
      line-height: 50px;
    }
  </style>
</head>
<body>
  <p id="test">

  </p>
  <input type="text" class="itemInput" id="name0" />
  <input type="text" class="itemInput" id="name1" />
  <input type="text" class="itemInput" id="name2" />
  <input type="text" class="itemInput" id="name3" />
  <button onclick="setItemFun()">点我保存</button>
  <script>
    var localStorage = window.localStorage;
    var arrKey = ["name0", "name1", "name2", "name3"];
    function checkLocal(){
      if(localStorage.getItem(arrKey[0])){
        for (var i = 0; i < arrKey.length; i++) {
          var tempvalue = localStorage.getItem(arrKey[i])
          $("#test").append("<p class='item'>" + tempvalue + "</p>");
          $(".itemInput").eq(i).val(tempvalue);
        }
      }
    }
    function setItemFun(){
      for(var i = 0; i < $(".itemInput").length; i ++){
        localStorage.setItem("name" + i, $(".itemInput").eq(i).val())
      }
    }
    $(function(){
      checkLocal();
    });
  </script>
</body>
</html>
怪我咯
localStorage.setItem(key, value)
localStorage.getItem(key)
怪我咯
let save = (keyname,obj) => localStorage.setItem(keyname, JSON.stringify(obj));
let load = (keyname) => JSON.parse(localStorage.getItem(keyname));
怪我咯

需要注意的是localstorage默认读取出来是字符串,需要转换为Javascript对象。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号