js把input的value值写入localStorage在另一个页面读取的方法

在做网站表单页时第一个页面的字段填过，第二个页面一样重复字段不希望重新填，应该如何实现呢？

分析下问题，第一个页面已经填过的数据如果提交了就进入了数据库，这是要读取出来可以通过ajax来加载。这个需要和后端交互，有没有更简单的方法呢？其实我们可以尝试将input的value值写入localStorage，然后另一个页面再从localStorage中取出来，这样纯前端就可以完成，不需要和后端交互了。具体请看下面的代码：

页面1代码：

<!--页面1-->

<script src="/jquery/2.1.4/jquery.min.js"></script><!--引入jQuery库-->

<form>
    <label>请输入内容</label>
    <input type="text" id="abc" name="abc"/>
</form>

<script>
    var abc=$('#abc');
    abc.change(function(){
        var abcval=abc.val();
        localStorage.setItem('abc',abcval);
    });
</script>

页面2代码：

<!--页面1-->

<script src="/jquery/2.1.4/jquery.min.js"></script><!--引入jQuery库-->
 
<form>
    <label>请输入内容</label>
    <input type="text" id="abc" name="abc"/>
</form>


<script>
    var abc=$('#abc');
    $(document).ready(function(){
        var abcval2=localStorage.getItem('abc');
        abc.val(abcval2);
    });
</script>

通过这个方法可以快速通过前端在两个页面间存值取值，但是缺点是存储上限是5M，只适合存储文本字段。