如何将数据存储到HTML中的浏览器缓存目录?

时间:2019-05-02 02:09:35

标签: html forms jscript

项目:https://github.com/marcosnunes/storeData

我需要将表单中的数据发布到{div id =“ result”} {/ div}中,然后存储到本地缓存的目录中。有人可以帮我写这段代码吗?我想做的是将一个本地站点加载到Android Hibrid应用中。

表格:

<body>

<div class="w3-container">
<div class="w3-card-4" style="width:100%">
<header class="w3-container w3-light-grey">
<h2><Div id="nameBox"></Div></h2>
</header>
<div class="w3-container">
<h2><div id="result"></div></h2>
</div>
</div>
</div>

<div class="w3-container">
<div class="row">
<div class="col-md-8">
<h3>Adicionar um Envelope e Saldo</h3>

<form name="contact-form" 
method="post" id="contact-form">
<div class="form-group">
<label for="inputName">Envelope</label>
<input type="text" 
class="form-control" id="cardName" name="cardName" placeholder="Envelope" 
required>
</div>

<div class="form-group">
<label for="inputValue">Valor</label>
<input type="number" class="form-control" id="Value" name="Value" 
placeholder="Valor" required>
</div>

<div class="form-group">
<label for="inputDescription">Descrição</label>
<input type="text" class="form-control" id="Description" 
name="Description" 
placeholder="Descrição" required>
</div>

<button onclick="store()" class="btn btn-primary" name="submit" 
value="Submit" 
id="submit_form">Adicionar</button>

</form> 
</div>
</div>
</div>

</body>
</html>

我也需要在按钮onclick()上创建新的div

java代码

<script>

function store(){
    if (typeof(Storage) !== "undefined") {  
        var inputName = document.getElementById("cardName");
        sessionStorage.setItem("cardName", inputName.value);

        var inputValue = document.getElementById("Value");
        sessionStorage.setItem("Value", inputValue.value);

        var inputDescription = document.getElementById("Description");
        sessionStorage.setItem("Description", inputDescription.value);

        document.getElementById("result1").innerHTML = sessionStorage.getItem("cardName");
        document.getElementById("result2").innerHTML = sessionStorage.getItem("Value");
        document.getElementById("result3").innerHTML = sessionStorage.getItem("Description");

        } else {
        document.getElementById("result").innerHTML = "Ops! Alguma coisa deu errado...";
    }
}

1 个答案:

答案 0 :(得分:0)

我明白了! 只需在按钮上插入type =“ button”。

<button onclick="store()" **type="button"** class="btn btn-primary" 
name="submit" value="Submit" 
id="submit_form">Adicionar</button>