Change src from an action-based image on the previous page [closed]

As commented out, a good solution is to use LocalStorage , at a glance: link

To preserve the code:

HTML

<button id="btnJujuba" type="button" src-img-dinamica="https://img.buzzfeed.com/buzzfeed-static/static/2015-07/29/10/enhanced/webdr15/enhanced-16875-1438181730-13.jpg">
  jujuba
</button>

<hr />

<img id="imgDinamica" src="http://galaxy.mobity.net/uploads/148/logo/1399898656.png"/>

JS

varbtnJujuba=document.querySelector('#btnJujuba');btnJujuba.addEventListener('click',function(){varsrcImgDinamica=this.getAttribute('src-img-dinamica');window.localStorage.setItem('srcImgDinamica',srcImgDinamica);loadImgDinamica();});functionloadImgDinamica(){varimgDinamica=document.querySelector('#imgDinamica');varsrcImgDinamica=window.localStorage.getItem('srcImgDinamica');if(srcImgDinamica){imgDinamica.setAttribute('src',srcImgDinamica);}}

TheloadImgDinamica()methodistosimulatethepageexchange,thatis,initsplaceyoudotheredirectandonthatpageyouexecutethecodethatisinsideit.

NotallbrowsersandversionssupportAPIofLocalStorage,see: link . To know if the browser supports LocalStorage simply test if it exists on object window :

if(window.localStorage) {
    // da suporte
} else {
    // não da suporte
}

For this you can make the solution using cookies, see link

To preserve the code:

HTML

<button id="btnJujuba" type="button" src-img-dinamica="https://img.buzzfeed.com/buzzfeed-static/static/2015-07/29/10/enhanced/webdr15/enhanced-16875-1438181730-13.jpg">
  jujuba
</button>

<hr />

<img id="imgDinamica" src="http://galaxy.mobity.net/uploads/148/logo/1399898656.png"/>

JS

varbtnJujuba=document.querySelector('#btnJujuba');btnJujuba.addEventListener('click',function(){varsrcImgDinamica=this.getAttribute('src-img-dinamica');document.cookie='srcImgDinamica='+srcImgDinamica;loadImgDinamica();});functionloadImgDinamica(){varimgDinamica=document.querySelector('#imgDinamica');varsrcImgDinamica=document.cookie.split('=')[1];if(srcImgDinamica){imgDinamica.setAttribute('src',srcImgDinamica);}}

Withcookies,thereisnodangerofthebrowserbeingabletosupportit,buttotreatit,itisalready"complicated" and "manual" because cookies do not work with "key and value" equal to LocalStorage so you have to search within String registered in the cookie to find the snippet of information you want. Maybe by transforming a javascript object into JSON and saving in cookie, then making parse of it to javascript object again improves access, I did not test it I just had that idea now.

But take a look at the cookie documentation: link

Another solution, as manual as using cookies is to use url parameter, I will not make a jsfiddle but it looks like this:

JS

var btnJujuba = document.querySelector('#btnJujuba');

btnJujuba.addEventListener('click', function() {
    var srcImgDinamica = this.getAttribute('src-img-dinamica');

    window.location.href='http://minhaurl?srcImgDinamica='+encodeURIComponent(srcImgDinamica);
});

// na outra página
function loadImgDinamica() {
    var imgDinamica = document.querySelector('#imgDinamica');

    var srcImgDinamica = getQueryParam().srcImgDinamica;

    if(srcImgDinamica) {
        imgDinamica.setAttribute('src', srcImgDinamica);
    }
}

function getQueryParam() {
    var queryString = {};
    window.location.search.substr(1).split('&').forEach(function (pair) {
      if (pair === '') return;
      var parts = pair.split('=');
      queryString[parts[0]] = decodeURIComponent(parts[1].replace(/\+/g, ' ')).replace(/\+/g, ' ');
    });
    return queryString;
}

This getQueryParam function is a function that transforms all Query Params of a url into a javascript object.

It can be said that the solution by URL is the least sophisticated, by LocalStorage most sophisticated and Cookie the intermediate between them.