Question

我正在开发一个Jquery Mobile应用程序 - 歌词Lyrics，它有一个单页index.html，我在List视图中手动添加了几首歌曲。现在我想添加必须在列表视图中显示的新歌词。我有一个用户填写的表单：歌曲名称，歌词名称＆amp;歌曲歌词。我不想使用数据库。所以现在我的问题是如何存储表格数据＆amp;在列表视图中显示它。有没有办法将动态表单数据保存在某些.txt文件中？在html页面或任何其他方式显示它，我已经尝试过但可能无法找到解决方案。请帮忙谢谢。这是我的Code index.html Page

＆＃13;

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Mobile App using Jquery</title>
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.12/css/all.css" integrity="sha384-G0fIWCsCzJIMAVNQPfjH08cyYaUtMwjJwqiRKxxE/rx96Uroj1BtIQ6MLJuheaO9" crossorigin="anonymous">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<style>
	.fullscreen{
	  max-width: 100%;
	  height: auto;
	}
	h1{
    font-size: 14pt;
    color: #E76C67;
    margin-top: 0%;
	}
	h2{
    font-size: 12pt;
    color: #444444;
    margin-top: -3%;
	}
	</style>
  </head>
<body>
<!--Index Page startes Here --> 


<div data-role="page" id="demo-page" data-url="demo-page">
    <div data-role="header">
          <h1>Gospel Songs </h1>
            <a href="#" id="home" data-icon="home" data-iconpos="notext"> Home</a>

        <a href="#" class="jqm-search-link ui-shadow ui-btn ui-btn-icon-notext ui-corner-all ui-icon-search ui-nodisc-icon ui-alt-icon ui-btn-right">Search</a>
    </div><!-- /header -->
    <div role="main" class="ui-content">
        <ul data-role="listview" data-autodividers="true" id="sortedList" data-filter="true">
            	<li><a href="#"><h1>All The Way My Saviour Leads Me lyrics</h1>
			 <p>All the way my Savior leads me
What have I to ask beside?....
</p>
			<a href="#A1"> </a>
			 </a>
		     </li>
       <li><a href="#"><h1>Amazing Grace lyrics</h1>
			 <p>"Amazing Grace, how sweet the sound,...</p>
			 <a href="#A2" > </a>
			 </a>
		   </li>

            <li><a href="#"><h1><span id='display_song_name'></span> </h1> </a></li>
        </ul><!-- /listview -->
    </div><!-- /content -->
<footer data-role="footer" data-position="fixed"> 
  <nav data-role="navbar">     
   <ul>	   
    <li><a href="index.html" data-icon="home"> Home </a></li>
	<li><a href="index.html" data-icon="grid">Photos</a></li>
	<li><a href="#add_song" data-icon="plus" data-transition="flip" id="#add_song"> Add Song </a> </li>
   </ul>  
  </nav>

</footer><!-- /footer -->
</div>

<div data-role="page" id="add_song">
     <div data-role="header">
            <h1>Add Songs Lyrics</h1>
            <a href="index.html" id="home" data-icon="back" data-iconpos="notext"> Home</a>
   
     </div>
      <div role="main" class="ui-contain">
	  <form id="myform" type="post">
       <label for="basic">Song Name:</label>
       <input type="text" name="name" id="song_name" value="">
	   <label for="basic">lyricist Name:</label>
       <input type="text" name="name" id="lyricist_name" value="">
	   <label for="textarea">Song Lyrics:</label>
       <textarea name="song_lyrics" id="song_lyrics"></textarea>
	   <input type="submit" value="submit">
	   </form>
     </div>
<footer data-role="footer" data-position="fixed"> 
  <nav data-role="navbar">     
   <ul>	   
    <li><a href="index.html" data-icon="home"> Home </a></li>
	<li><a href="index.html" data-icon="grid">Photos</a></li>
	<li><a href="" data-icon="plus" id="add_song"> Add Song </a> </li>
   </ul>  
  </nav>
</footer><!-- /footer -->

</div><!-- ADD_SONG_PAGE content -->





</body>
</html>

＆＃13;

我在页脚中有一个按钮：当用户点击按钮时添加歌曲它会将我们带到新页面：打开表单。

Answer 1

您添加了标记HTML5，因此您可以使用webstorage，看看：http://www.w3schools.com/HTML/html5_webstorage.asp。

来自W3Schools：

使用Web存储，Web应用程序可以在本地存储数据   用户的浏览器。

在HTML5之前，应用程序数据必须存储在包含的cookie中   在每个服务器请求中。 Web存储更安全，数量更多   数据可以存储在本地，而不会影响网站性能。

与Cookie不同，存储限制要大得多（至少5MB）   信息永远不会传输到服务器。

Web存储是按来源（每个域和协议）。所有页面，来自   一个来源，可以存储和访问相同的数据。

如何在不使用数据库的情况下在html页面中单击提交按钮显示表单数据

1 个答案: