谷歌浏览器本地存储不能正常工作

在我的书签应用程序，当我试图在点击提交按钮后插入书签在本地存储后，我发现本地存储中的内容，但它根本不显示文件。我的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>

来源

2017-05-11 Aaswin Sinha

“这不起作用“不是很具描述性。你的控制台是否有错误？ – Amy

我看到努力的片断中运行时，我得到：

VM128 JS：99未捕获抛出：DOMException：无法读取'Window'中的'localStorage'属性：文档被沙盒包装，并且缺少'allow-same-origin'标志。在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>

来源

2017-05-11 19:00:26 Woodrow

谷歌浏览器本地存储不能正常工作

回答

相关问题