Вы можете использовать localStorage и подход, который вы пытаетесь заставить работать, но в итоге у localStorage будет отдельный объект для каждого пользователя. Если все в порядке, тогда вы используете localStorage после загрузки, чтобы проверить, вошел ли пользователь в систему, а затем загрузите данные пользователей. Затем обновите данные до localStorage, когда значения изменятся. Вы можете проверить встроенные комментарии для деталей:
HTML, если есть пользователь, вошедший в систему:
<h3>User <span class="username"><?php echo $user; ?></span> is logged in</h3>
<form method="post">
<input type="hidden" name="action" value="logout"/>
<button type="submit">Logout</button>
</form>
<hr/>
<div>
<h2>User counter: <span id="counter"></span></h2>
<div>
<button id="inc-counter">Increase</button>
<button id="dec-counter">Decrease</button>
</div>
</div>
Javascript для обработки localStorage:
// Get user stored on page HTML
const user = document.querySelector("span.username");
// Something to update/alter using user data and/or user input
const counter = document.querySelector("#counter");
const incCounter = document.querySelector("#inc-counter");
const decCounter = document.querySelector("#dec-counter");
if(user) { // If there is a user logged in
// Get the username
const username = user.textContent;
// Get the localStorage the belongs to that user (using username for key)
let storageUser = JSON.parse(localStorage.getItem(username) || 'null');
// Use default user object if the user has no previous settings stored
let currentUser = storageUser || {
BaseMap: {
counter: 0
}
};
// Display the user data
function displayCounter() {
const BaseMap = 'BaseMap' in currentUser ? currentUser.BaseMap : {};
let userCounter = 'counter' in BaseMap ? BaseMap.counter : 0;
counter.textContent = userCounter;
}
// Alter the user data and save it to localStorage user settings object
function alterCounter(addToCounter) {
// Check if BaseMap object exists or default
const BaseMap = 'BaseMap' in currentUser ? currentUser.BaseMap : {};
// Check if data exists or default
let userCounter = 'counter' in BaseMap ? BaseMap.counter : 0;
// Alter user data according to user input
userCounter += addToCounter;
// Change user settings object
currentUser['BaseMap']['counter'] = userCounter;
// Save user settings object
localStorage.setItem(username, JSON.stringify(currentUser));
// Display altered user data
displayCounter();
}
// Initialize by display retrieved/default data
displayCounter();
// Add event listeners to user inputs
incCounter.addEventListener('click', () => alterCounter(1));
decCounter.addEventListener('click', () => alterCounter(-1));
}
Вы можете проверить онлайн-пример, который я сделал по ссылке ниже:
https://zikro.gr/dbg/so/60010743/ (пользователи userA, userB оба с паролем 1234 может использоваться для демонстрации)
Это будет работать и извлекать / сохранять пользовательские данные в localStorage, используя username для каждого пользователя. Имейте в виду, что этот метод сохранит пользовательские настройки только для указанного местоположения браузера c. Если вы хотите иметь пользовательские настройки, когда пользователь входит в систему из любого места, то вам следует go использовать традиционный обходной путь, основанный на сеансе сервера, но он не настолько гибок, когда речь идет о пользовательских настройках, потому что вам придется обновить Каждые данные / настройки с использованием запросов к серверу каждый раз, когда пользователь вносит изменения, которые возможны, но это требует реализации сервер + клиент.
Комбинация хранения настроек на стороне сервера + сеанс сервера + клиент localStorage будет лучший подход к этой ситуации.