Question

Technologies:

javascript

html

Tolerim

a day ago

How can lz-string be utilized to import/export saved game data in JavaScript?

Recently, I've been playing a lot of web-based games that allow the user to save and transfer their progress. When the user clicks "export", they receive a string of random characters. I'm interested in using lz-string to store my game data, but I'm not sure where to start. If anyone has any knowledge on this topic, please share it with me as all suggestions are appreciated.

function saveGame() { var gameSave = { stars: Game.stars, totalStarsEarned: Game.totalStarsEarned, buildings:buildings, upgrades:upgrades, achievements:achievements, }; localStorage.setItem("gameSave", JSON.stringify(gameSave)); } function loadGame() { var savedGame = JSON.parse(localStorage.getItem("gameSave")); if(localStorage.getItem("gameSave") !== null) { if(typeof savedGame.stars !== "undefined") Game.stars = savedGame.stars; if(typeof savedGame.totalStarsEarned !== "undefined") Game.totalStarsEarned = savedGame.totalStarsEarned; if(typeof savedGame.buildings !== "undefined") buildings = savedGame.buildings; if(typeof savedGame.upgrades !== "undefined") upgrades = savedGame.upgrades; if(typeof savedGame.achievements !== "undefined") achievements = savedGame.achievements; }

Make sure to enclose any code using <pre> tags if you plan on outputting it to an HTML file.

Answers(1)

Accepted Answer

The random characters you are seeing after clicking "export" are likely the result of encoding the save game state using lz-string. To store your save game state, you can use the code you provided:

function saveGame() {
  var gameSave = {
    stars: Game.stars,
    totalStarsEarned: Game.totalStarsEarned,
    buildings:buildings,
    upgrades:upgrades,
    achievements:achievements,
  };
  localStorage.setItem("gameSave", JSON.stringify(gameSave));
}

function loadGame() {
  var savedGame = JSON.parse(localStorage.getItem("gameSave"));
  if(localStorage.getItem("gameSave") !== null) {
    if(typeof savedGame.stars !== "undefined")
      Game.stars = savedGame.stars;
    if(typeof savedGame.totalStarsEarned !== "undefined")
      Game.totalStarsEarned = savedGame.totalStarsEarned;
    if(typeof savedGame.buildings !== "undefined")
      buildings = savedGame.buildings;
    if(typeof savedGame.upgrades !== "undefined")
      upgrades = savedGame.upgrades;
    if(typeof savedGame.achievements !== "undefined")
      achievements = savedGame.achievements;
  }
}

To store the save game state in lz-string format, you can modify the saveGame function to encode the gameSave object using lz-string before storing it in local storage:

function saveGame() {
  var gameSave = {
    stars: Game.stars,
    totalStarsEarned: Game.totalStarsEarned,
    buildings:buildings,
    upgrades:upgrades,
    achievements:achievements,
  };
  var compressedGameSave = LZString.compress(JSON.stringify(gameSave));
  localStorage.setItem("gameSave", compressedGameSave);
}

Similarly, you can modify the loadGame function to decode the saved game state using lz-string after reading it from local storage:

function loadGame() {
  var compressedGameSave = localStorage.getItem("gameSave");
  if(compressedGameSave !== null) {
    var gameSave = JSON.parse(LZString.decompress(compressedGameSave));
    if(typeof gameSave.stars !== "undefined")
      Game.stars = gameSave.stars;
    if(typeof gameSave.totalStarsEarned !== "undefined")
      Game.totalStarsEarned = gameSave.totalStarsEarned;
    if(typeof gameSave.buildings !== "undefined")
      buildings = gameSave.buildings;
    if(typeof gameSave.upgrades !== "undefined")
      upgrades = gameSave.upgrades;
    if(typeof gameSave.achievements !== "undefined")
      achievements = gameSave.achievements;
  }
}

Note that you will need to include the lz-string library in your HTML file in order to use the LZString object. You can do this by adding the following script tag to your HTML file:

<script src="https://cdnjs.cloudflare.com/ajax/libs/lz-string/1.4.4/lz-string.min.js"></script>