Я объявил переменную var scale=0.8 в скрипте в теле моего html, и когда я изменяю размер графика, сделанного русалкой, я соответствующим образом обновляю масштаб, например
<script>
var scale=0.8;
DeployGraph();
function toggleZoomScreen(mode){
if (mode == 1){
scale+=0.1;
// document.body.style.zoom=scale.toString()+"%";
}
else if (mode == 2){
scale-=0.1;
// document.body.style.zoom=scale.toString()+"%";
}
var mer = document.getElementById("mermaid");
mer.style.transform= "scale("+scale+","+scale+")";
}
</script>
Я хочу каким-то образом сохранить значение переменной, чтобы каждый раз, когда я обновляюсь, вызывался DeployGraph, и размер графика изменялся в том же значении масштаба. DeployGraph объявляется в заголовке html, а не в теле. Можно ли это сделать?
Я попытался создать другую переменную в голове и обновлять ее каждый раз, когда изменяется значение масштаба, а затем в DeployGraph я использую
element.style.transform= "scale("+scale+","+scale+")"; где element = document.getElementById("русалка");
Однако значение всегда является значением по умолчанию.
🤔 А знаете ли вы, что...
JavaScript активно развивается, и новые версии языка регулярно включают новые функции и улучшения.
Вы не можете сохранять переменные при обновлении страницы.
Что вам нужно сделать, так это сохранить нужное вам значение в браузере и проверить его после загрузки страницы.
Вы можете сделать это, используя Параметры поиска URL, печенье или локальное хранилище.
При использовании локального хранилища вы можете сделать следующее:
// On document load, after initialising the scale variable
scale = window.localStorage.getItem('scale') || 0.8; // add || 0.8 in case value is undefined
// In toggleZoomScreen
function toggleZoomScreen(mode){
if (mode == 1){
scale+=0.1;
}
else if (mode == 2){
scale-=0.1;
}
// Update the value in local storage
window.localStorage.setItem('scale', scale);
var mer = document.getElementById("mermaid");
mer.style.transform= "scale("+scale+","+scale+")";
}