Javascript 页面重新加载时持久化布局

我有两个按钮，每一个都会改变方向，要么是ltr，要么是rtl，我试图让这两个视图在单击时都保持不变，如果单击了ltr，页面将保持在ltr布局上，即使在单击rtl之前刷新，然后rtl会保持不变，直到发生更改 这是代码，但它不起作用

             <button onclick ='changeToRTL()'>Right to Left</button>
             <button  onclick ='changeToLTR()'>Left to Right</button>
             


<script>
    function changeToLTR(){
  $('body').removeClass('direction-rtl').addClass('direction-ltr')
  window.onload=changeToLTR();
  // initiate();
}

function changeToRTL(){
  $('body').removeClass('direction-ltr').addClass('direction-rtl');
  window.onload=changeToRTL();

  
}

从右到左
从左到右
函数changetortr（）{
$（'body'）.removeClass（'direction-rtl'）.addClass（'direction-ltr'））
window.onload=changetortr（）；
//发起（）；
}
函数changeToRTL（）{
$（'body'）.removeClass（'direction-ltr'）.addClass（'direction-rtl'）；
window.onload=changeToRTL（）；
}

您可以使用

localStorage

存储所选方向并将其加载到页面加载中

函数更改方向（directionSuffix）{
//删除所有以“方向”开头的类
$（'body'）.removeClass（函数（索引，css）{
return（css.match（/\b方向\S+/g）| |[]）.join（“”）；
})
//添加方向类
.addClass（'方向-'+方向uffix）；
//设置本地存储项
setItem（'direction'，directionSuffix）；
}
$（文档）.ready（函数（）{
//检索本地存储项
让storedDirection=localStorage.getItem（'direction'）；
//检查项目是否已设置，如果已设置，则调用“changeDirection”功能
if（存储方向的类型！==“未定义”）{
改变方向（存储方向）；
}
});

从右向左
从左到右
您可以使用
本地存储
存储所选方向并将其加载到页面加载中


函数更改方向（directionSuffix）{
//删除所有以“方向”开头的类
$（'body'）.removeClass（函数（索引，css）{
return（css.match（/\b方向\S+/g）| |[]）.join（“”）；
})
//添加方向类
.addClass（'方向-'+方向uffix）；
//设置本地存储项
setItem（'direction'，directionSuffix）；
}
$（文档）.ready（函数（）{
//检索本地存储项
让storedDirection=localStorage.getItem（'direction'）；
//检查项目是否已设置，如果已设置，则调用“changeDirection”功能
if（存储方向的类型！==“未定义”）{
改变方向（存储方向）；
}
});

从右向左
从左到右