Set Local Storage

Description

The setLocalStorage action allows you to save key-value data locally on the user’s device.
It’s useful for caching lightweight data, storing user preferences, or maintaining app state without relying on APIs or server-side storage.

Function Signature

Superfans.actions.setLocalStorage("gender", "Male")

Parameter	Type	Required	Description
Key	String	Yes	Unique key name for storing the data. Example: "gender".
Value	String	Yes	Data to be stored. Can be a string, number, or object (automatically stringified).

Structure of Response

Status	Response
Success	`{ "status": "success", "message": "Successfully added the value to local storage" }`
Invalid Params	`{ "status": "error", "errorId": 400, "errorHandle": "invalid-params", "message": "Invalid params" }`
Unexpected Error	`{ "status": "error", "errorId": 500, "errorHandle": "unknown-error", "message": "Something unexpected happened" }`

Example Usage

let spinning = false;
function spin() {
  if (spinning) return;
  spinning = true;
  const wheel = document.getElementById("wheel");
  const result = document.getElementById("result");
  const prizes = [
  {
    "title": "10% OFF",
    "code": "TESTCODE"
  },
  {
    "title": "$15 OFF",
    "code": "app15"
  },
  {
    "title": "20% OFF",
    "code": "20percentdiscount"
  },
  {
    "title": "$25 OFF",
    "code": "app25"
  },
  {
    "title": "30% OFF",
    "code": "app30"
  }
]
  const rand = Math.floor(Math.random() * prizes.length);
  console.log("rand",rand);
  const rotation = 360 * 5 + rand * 60 + 30;
  wheel.style.transform = `rotate(${rotation}deg)`;
  setTimeout(() => {
    result.textContent = `🎉 You got: ${prizes[rand].title}`;
    result.textCode = prizes[rand].code;
    console.log("code",result.textCode);
    spinning = false;
// set the storage based on what discount code user selects
    Superfans.actions.setLocalStorage("discount_code", result.textCode);
  }, 4200)
}

body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background: #fffafc;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.wheel-container {
  position: relative;
  width: 300px;
  height: 300px;
  margin-top: 40px;
}
.wheel {
  width: 100%;
  height: 100%;
  border: 8px solid #f8d000;
  border-radius: 50%;
  position: relative;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  transition: transform 4s cubic-bezier(0.33, 1, 0.68, 1);
  background: conic-gradient(
    #ff5e5e 0deg 60deg,
    #ffb347 60deg 120deg,
    #6edcc4 120deg 180deg,
    #dcdcdc 180deg 240deg,
    #ffe066 240deg 300deg,
    #cccccc 300deg 360deg
  );
}
.segment {
  position: absolute;
  width: 50%;
  height: 50%;
  top: 50%;
  left: 50%;
  transform-origin: 0% 0%;
  color: #000;
  font-size: 14px;
  font-weight: bold;
  text-align: right;
  padding-right: 10px;
}
.segment:nth-child(1) { transform: rotate(30deg); }
.segment:nth-child(2) { transform: rotate(90deg); }
.segment:nth-child(3) { transform: rotate(150deg); }
.segment:nth-child(4) { transform: rotate(210deg); }
.segment:nth-child(5) { transform: rotate(270deg); }
.segment:nth-child(6) { transform: rotate(330deg); }
.spin-btn {
  margin-top: 20px;
  padding: 10px 20px;
  background: #f4511e;
  color: #fff;
  border: none;
  border-radius: 25px;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.spin-btn:hover {
  background: #e1410d;
}
.result-box {
  margin-top: 30px;
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

<meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Spin to Win</title>
  <link rel="stylesheet" href="styles.css">
  <div id="spinwheel_block">
  <div class="wheel-container">
    <div class="wheel" id="wheel">
      <div class="segment">10% OFF</div>
      <div class="segment">$15 OFF</div>
      <div class="segment">20% OFF</div>
      <div class="segment">$25 OFF</div>
      <div class="segment">30% OFF</div>
      <div class="segment">Try Again</div>
    </div>
    <button class="spin-btn" onclick="spin()">SPIN</button>
  </div><br><br>
  <div id="result" class="result-box"></div>
  <div>
                  </div></div>

Best Practices

Use descriptive keys: Maintain clear, consistent key names (e.g., user_theme, cart_step).
Avoid large data: Designed for lightweight info (strings, numbers, small JSON).
Secure data externally: Don’t store sensitive information (tokens, credentials).
Keep logic modular: Group similar stored keys for easier management.
Combine with getLocalStorage: Retrieve values later for continuity or personalization.

Caveats

Overwrite behavior: Setting a value with an existing key replaces the old value.
Device-local only: Data is not synced between devices or accounts.
Limited size: Ideal for small payloads (< 1 MB).
Plaintext storage: Data is not encrypted — store non-sensitive info only.
Async nature: Returns a Promise; always handle success/failure gracefully.