谷歌浏览器本地存储无法正常工作

在我的书签应用程序中，当我单击提交按钮后尝试在本地存储中插入书签时，我可以看到本地存储中的内容，但它根本不显示文件。我的JavaScript文件：

//listener for form submit
document.getElementById('myform').addEventListener('submit',savebookmark);
//function savebookmark
function savebookmark(e)
{   //var for holding sitename and siteurl
    var siteName=document.getElementById('sitename').value;
    var siteUrl=document.getElementById('siteurl').value;
    var bookmark={
        name:siteName,
        url:siteUrl
    }
    /*  
    localStorage.setItem('test', 'hello world!!');
    console.log(localStorage.getItem('test'));
    localStorage.removeItem('test');
    console.log(localStorage.getItem('test'));
*/
//test if bookmark is null
     if(window.localStorage.getItem('bookmarks') === null){
    // Init array
    var bookmarks = [];
    // Add to array
    bookmarks.push(bookmark);
    // Set to localStorage
    window.localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
  }
        //prevent from from submitting
    e.preventDefault();
}

我的 HTML 文件：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>BOOKMARKER</title>
    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <div class="header clearfix">
        <nav>
        </nav>
        <h1 class="text-muted">BOOKMARKER</h1>
      </div>
      <div class="jumbotron">
        <h2 class="display-3">Bookmark your Site</h2>
        <form id="myform">
        <div class="form group">
         <label>SITE NAME</label>
         <input type="text" class="formcontrol" id="sitename" placeholder="Website name">
        </div>
        <div class="form group">
         <label>SITE URL</label>
         <input type="text" class="formcontrol" id="siteurl" placeholder="Website URL">
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
        </form>
      </div>
      <div class="row marketing">
        <div class="col-lg-12">
          <div id="bookmarksresult">
          </div>
        </div>

      </div>
      <footer class="footer">
        <p>&copy; Bookmarker 2017</p>
      </footer>
    </div> <!-- /container -->
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="https://code.jquery.com/jquery-3.2.1.js"
    integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
    crossorigin="anonymous"> 
    </script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/main.js"></script>
  </body>
</html>

我在尝试作为片段运行时看到：

VM128 js：99 未捕获的 DOMException：无法从"窗口"读取"localStorage"属性：文档已沙盒化，缺少"允许同源"标志。 at HTMLFormElement.savebookmark (http://stacksnippets.net/js:99:13(

但是，我能够用这个小提琴成功地让它工作：https://jsfiddle.net/tafjn3dd/

http://prntscr.com/f6q7d5(截图(

//listener for form submit
document.getElementById('myform').addEventListener('submit', savebookmark);
//function savebookmark
function savebookmark(e)
{
  //prevent from from submitting
  e.preventDefault();
  //var for holding sitename and siteurl
  var siteName = document.getElementById('sitename').value;
  var siteUrl = document.getElementById('siteurl').value;
  var bookmark = {
    name: siteName,
    url: siteUrl
  }
  /*  
    localStorage.setItem('test', 'hello world!!');
    console.log(localStorage.getItem('test'));
    localStorage.removeItem('test');
    console.log(localStorage.getItem('test'));
*/
  //test if bookmark is null
  if (window.localStorage.getItem('bookmarks') === null) {
    // Init array
    var bookmarks = [];
    // Add to array
    bookmarks.push(bookmark);
    // Set to localStorage
    window.localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
  }
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>BOOKMARKER</title>
  <!-- Bootstrap core CSS -->
</head>
<body>
  <div class="container">
    <div class="header clearfix">
      <nav>
      </nav>
      <h1 class="text-muted">BOOKMARKER</h1>
    </div>
    <div class="jumbotron">
      <h2 class="display-3">Bookmark your Site</h2>
      <form id="myform">
        <div class="form group">
          <label>SITE NAME</label>
          <input type="text" class="formcontrol" id="sitename" placeholder="Website name">
        </div>
        <div class="form group">
          <label>SITE URL</label>
          <input type="text" class="formcontrol" id="siteurl" placeholder="Website URL">
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
      </form>
    </div>
    <div class="row marketing">
      <div class="col-lg-12">
        <div id="bookmarksresult">
        </div>
      </div>
    </div>
    <footer class="footer">
      <p>&copy; Bookmarker 2017</p>
    </footer>
  </div>
  <!-- /container -->
  <!-- Bootstrap core JavaScript
    ================================================== -->
  <!-- Placed at the end of the document so the pages load faster -->
  <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
  <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous">
  </script>
</body>
</html>

相关内容

最新更新

热门标签：