时间戳

首页 > 解决方案 > 如何使 Lang 选择器根据本地存储中的值工作？

javascript - 如何使 Lang 选择器根据本地存储中的值工作？

问题描述

嗨，我正在处理这行代码，它是一个语言选择器，我能够将 Lang 选择推送到 localstorage，但是如何让页面选择存储的值并保留它？每次刷新页面后返回默认的英语语言，我的想法用完了谢谢。

<ul>
  <li><a lang="en" href="../Index.html">Home</a></li>
  <li><a lang="en" href="../Artgallary.html">Art Gallary</a></li>
  <li><a lang="en" href="../Riaart.html">Ria Art</a></li>
  <li><a lang="en" href="../Riaprojects.html">Ria Projects</a></li>
  <li><a lang="en" href="../Videos.html">Videos</a></li>
  <li><a lang="en" href="../About.html">About</a></li>
  <li><a lang="en" href="../Contact.html">Contact</a></li>

  <li><a lang="ar" style="font-size:28px" href="../Index.html">الصفحة الرئيسية</a></li>
  <li><a lang="ar" style="font-size:28px" href="../Artgallary.html">معرض اللوحات</a></li>
  <li><a lang="ar" style="font-size:28px" href="../Riaart.html">فن الريا</a></li>
  <li><a lang="ar" style="font-size:28px" href="../Riaprojects.html">مشاريع الريا</a></li>
  <li><a lang="ar" style="font-size:28px" href="../Videos.html">&nbsp فيديو &nbsp</a></li>
  <li><a lang="ar" style="font-size:28px" href="../About.html"> &nbsp عني &nbsp </a></li>
  <li><a lang="ar" style="font-size:28px" href="../Contact.html">تواصل معي</a></li>
</ul>

function langChange(selection) {

  document.body.setAttribute('lang', selection.value);

  storeLanguage(selection.value)
}

function storeLanguage(task) {

  let tasks;
  if (localStorage.getItem('tasks') === null) {
      tasks = [];
  } else {
      tasks = JSON.parse(localStorage.getItem('tasks'))
  }

  tasks.push(task)

  localStorage.setItem('tasks', JSON.stringify(tasks));
}

标签： javascripthtml

解决方案

正如在如何使用 JavaScript页面更改 :lang 选择器样式中所解释的，
这里是相同的代码（现代化），并通过在 localStorage 中记住所选语言来完成

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> xyz </title>
  <style>
    body:lang(en) :not(:lang(en)),
    body:lang(ar) :not(:lang(ar)) {
      display: none;
      }
    li:lang(ar) a {
      font-size : 28px
      }
  </style>
</head>
<body lang="en">

  <select id="language-selector">
    <option value="en" selected > English language </option>
    <option value="ar"          > اللغة العربية    </option>
  </select>

  <ul>
    <li lang="en"><a href="../Index.html"       > Home         </a></li>
    <li lang="en"><a href="../Artgallary.html"  > Art Gallary  </a></li>
    <li lang="en"><a href="../Riaart.html"      > Ria Art      </a></li>
    <li lang="en"><a href="../Riaprojects.html" > Ria Projects </a></li>
    <li lang="en"><a href="../Videos.html"      > Videos       </a></li>
    <li lang="en"><a href="../About.html"       > About        </a></li>
    <li lang="en"><a href="../Contact.html"     > Contact      </a></li>

    <li lang="ar"><a href="../Index.html"        > الصفحة الرئيسية     </a></li>
    <li lang="ar"><a href="../Artgallary.html"   > معرض اللوحات        </a></li>
    <li lang="ar"><a href="../Riaart.html"       > فن الريا            </a></li>
    <li lang="ar"><a href="../Riaprojects.html"  > مشاريع الريا        </a></li>
    <li lang="ar"><a href="../Videos.html"       > &nbsp; فيديو &nbsp; </a></li>
    <li lang="ar"><a href="../About.html"        > &nbsp; عني &nbsp;   </a></li>
    <li lang="ar"><a href="../Contact.html"      > تواصل معي           </a></li>
  </ul>

<script>
  (function()
    {
    const langSelector = document.getElementById('language-selector')

    document.body.lang = langSelector.value
                       = localStorage.getItem('langSel') 
                        || document.body.lang
    
    langSelector.onchange = () =>
      {
      document.body.lang = langSelector.value
      localStorage.setItem('langSel', langSelector.value ) 
      }
    }
  )()
</script>
</body>
</html>

推荐阅读