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

Question

In my Bookmark application when i am trying to insert bookmarks in the local storage after clicking on the submit button i shouls see the contents in the local storage but it does not show a file at all. 在我的“书签”应用程序中，当我单击“提交”按钮后尝试在本地存储中插入书签时，我应该看到本地存储中的内容，但根本不显示文件。 my javascript file: 我的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();
}

my html file: 我的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>

Answer 1

I see when trying to run as a snippet I get: 我看到当尝试作为摘要运行时得到：

VM128 js:99 Uncaught DOMException: Failed to read the 'localStorage' property from 'Window': The document is sandboxed and lacks the 'allow-same-origin' flag. VM128 js：99未捕获的DOMException：无法从“窗口”读取“ localStorage”属性：文档已被沙盒化，并且缺少“允许相同来源”标志。 at HTMLFormElement.savebookmark ( http://stacksnippets.net/js:99:13 ) 在HTMLFormElement.savebookmark（ http://stacksnippets.net/js:99:13 ）

However, I was able to get it work successfully with this fiddle: https://jsfiddle.net/tafjn3dd/ 但是，我能够使用此提琴使其成功运行： https : //jsfiddle.net/tafjn3dd/

http://prntscr.com/f6q7d5 (screenshot) 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>

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

问题描述

1 个解决方案

解决方案1
0 2017-05-11 19:00:26

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

问题描述

1 个解决方案

解决方案1 0 2017-05-11 19:00:26

解决方案1
0 2017-05-11 19:00:26