JSFiddle - React, Tailwind, and code Playground

PV Demo

by tonytlwu

HTML

<script src="http://cl.ly/dKJu/pv.js"></script>
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12">
            <h2>Persisted Data API example</h2>
            <p>Try changing the persisted data using the form on the right, then refresh the page. The changes should be persisted on the device.</p>
        </div>
        <div class="col-sm-6"><h3>Persisted Data</h3><div id="original"></div></div>
        <div class="col-sm-6">
            <form id="dataForm">
                <h3>Update data <input type="submit" class="btn btn-primary" value="Update" /> <a href="#" class="btn btn-success pull-right" onclick="location.reload(); return false;">Refresh page</a></h3>
                <div class="form-group"><input class="form-control" name="name" id="name" placeholder="name" /></div>
                <div class="form-group"><input class="form-control" name="age" id="age" placeholder="age" /></div>
                <div class="form-group"><input class="form-control" name="fruits" id="fruits" placeholder="fruits" /></div>
                <div class="form-group"><input class="form-control" name="address.line1" id="line1" placeholder="address.line1" /></div>
                <div class="form-group"><input class="form-control" name="address.line2" id="line2" placeholder="address.line2" /></div>
                <div class="form-group"><input class="form-control" name="address.city" id="city" placeholder="address.city" /></div>
                <div class="form-group"><input class="form-control" name="address.postcode" id="postcode" placeholder="address.postcode" /></div>
                <div class="form-group"><input class="form-control" name="address.country" id="country" placeholder="address.country" /></div>
                <div class="form-group"><input class="form-control" name="address.country_code" id="country_code" placeholder="address.country_code" /></div>
                
            </form>
        </div>
    </div>
</div>

CSS

#original {
    border-right: 1px solid #cfcfcf;
    white-space: pre;
    font-family: monospace;
    font-size: 12px;
    overflow: auto;
    line-height: 2;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;transition: all 0.2s ease;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style>

JavaScript

var loadLeftColumnWithPVData = function(){
    $('#original').html( JSON.stringify(pvObj.data,"","    ") );
    // Reset background colour of persisted data dump
    setTimeout(function(){
        $('#original').css('background-color','none');
    },200);
};

var loadRightColumnWithPVDataStruct = function(){
    // Load form with value from persisted data source
    $('#name').val(pvObj.data.name);
    $('#age').val(pvObj.data.age);
    $('#fruits').val(pvObj.data.fruits);
    $('#line1').val(pvObj.data.address.line1);
    $('#line2').val(pvObj.data.address.line2);
    $('#city').val(pvObj.data.address.city);
    $('#postcode').val(pvObj.data.address.postcode);
    $('#country').val(pvObj.data.address.country);
    $('#country_code').val(pvObj.data.address.country_code);
};

$('#dataForm').submit(function(e){
    // Update persisted data
    pvObj.data.name = $('#name').val();
    pvObj.data.age = $('#age').val();
    pvObj.data.fruits = $('#fruits').val().split(',');
    pvObj.data.address.line1 = $('#line1').val();
    pvObj.data.address.line2 = $('#line2').val();
    pvObj.data.address.city = $('#city').val();
    pvObj.data.address.postcode = $('#postcode').val();
    pvObj.data.address.country = $('#country').val();
    pvObj.data.address.country_code = $('#country_code').val();
    // Save changes onto the persisted variable on the device
    pvObj.updateDevicePV(loadLeftColumnWithPVData);
    
    // Scroll to top and set a background colour to persisted data dump to highlight a change has occurred
    window.scrollTo(0,0);
    $('#original').css('background-color','papayawhip');
    e.preventDefault();
});

var pvInitialised = function(data){
    loadLeftColumnWithPVData();
    loadRightColumnWithPVDataStruct();
};

var dataStruct = {
    'name' : 'John',
    'age' : 27,
    'fruits' : [ 'apple', 'banana', 'cranberry' ],
    'address' : {
        'line1' : '94 White Lion Street',
        'line2' : '',
        'city' : 'London',
        'postcode' : 'N1...