I want to save multiple values in localStorage.setItem

Asked 2 years ago, Updated 2 years ago, 138 views

Hello!

I want to get multiple values in the element by clicking the button and save them to localstorage, but I can't do it well.
The cord will be long, so please excuse me here.
http://codepen.io/anon/pen/xGEjLO

$(function(){
  // there's the gallery and the trash
  var$gallery=$("#gallery"),
      $trash=$("#trash"),
      $items=$("#items");

  // let the gallery items be draggable
  $("li", $gallery).draggable({
    cancel: "a.ui-icon", // clicking an icon won't initialize dragging
    revert: "invalid", // when not dropped, the item will revert back to its initial position
    containment: "document",
    helper: "clone",
    cursor: "move"
  });

  // let the crash be dropable, accepting the gallery items
  $trash.dropable({
    accept: "#gallery>li",
    activeClass: "ui-state-highlight",
    drop:function(event,ui){
      deleteImage(ui.draggable);
    }
  });

  // let the gallery be dropable as well, accepting items from the crash
  $gallery.dropable({
    accept: "#trash li",
    activeClass: "custom-state-active",
    drop:function(event,ui){
      recycleImage(ui.draggable);
    }
  });

  // image deletion function
  var cycle_icon="<a href='link/to/recycle/script/when/we/have/js/off' title='Recycle this image' class='ui-iconui-icon-refresh'>Recycle image<a>";

  function deleteImage($item){
    varobj=cloneObject($item);
    var$list=$("ul", $trash).length?
        $("ul", $trash):
        $("<ul class='galleryui-helper-reset'/>").appendTo($trash);
    obj.find("a.ui-icon-trash").remove();
    obj.append(recycle_icon).appendTo($list).fadeIn(function(){
      obj
        .animate({
        width: "48px"
      })
        .find("img")
        .animate({
        height: "36px"
      });
    });
    $items.text($("li", $list).length);
  }

  // image cycle function
  vartrash_icon="<a href='link/to/trash/script/when/we/have/js/off' title='Delete this image' class='ui-iconui-icon-trash'>Delete image</a>";

  function recycleImage($item){

    $item.fadeOut(function(){
      $item.remove();
      $items.text($("li", $("ul", $trash))).length);
    });
  }

  // image preview function, demonstrating the ui.dialog used as a modal window
  function viewLargerImage($link){
    var src = $link.attr("href"),
      title=$link.siblings("img").attr("alt"),
      $modal=$("img[src$='"+src+"]");

    if($modal.length){
      $modal.dialog("open");
    } else{
      varimg=$("<img alt='+title+"'width='384' height='288' style='display: none;padding:8px;'/>")
        .attr("src",src).appendTo("body");
      setTimeout(function(){
        img.dialog({
          title: title,
          width —400,
          modal —true
        });
      }, 1);
    }
  }

  function cloneObject($item){
    varobj=$item.clone();
    obj.dragable({
      cancel: "a.ui-icon",
      revert: "invalid",
      containment: "document",
      helper: "clone",
      cursor: "move"
    });
    obj.click(function(event){
      var$item=$(this),
        $target=$(event.target);
      if($target.is("a.ui-icon-trash")){
        deleteImage($item);
      } else if ($target.is("a.ui-icon-zoomin")){
        viewLargerImage($target);
      } else if ($target.is("a.ui-icon-refresh")){
        recycleImage($item);
      }

      return false;
    });

    return obj;
  }

  // resolve the icons behavior with event deletion
  $("ul.gallery>li").click(function(event){
    var$item=$(this),
      $target=$(event.target);
    if($target.is("a.ui-icon-trash")){
      deleteImage($item);
    } else if ($target.is("a.ui-icon-zoomin")){
      viewLargerImage($target);
    } else if ($target.is("a.ui-icon-refresh")){
      recycleImage($item);
    }

    return false;
  });

  // Save to Click
  $("button#save").click(function(){
    variables = $("liimg", $("ul", $trash));


    for (vari=0,len=items.length;i<len;i++){
      localStorage.setItem(i,$(items[i]).attr("src"));
    }

    // verify that it has been saved
    for (vari=0,len=localStorage.length;i<len;i++){
      $("ul#storedItems").append("<li>"+"<img src="+localStorage.getItem(i)+">);
    }

  });

  $("button#clear").click(function(){
    localStorage.clear();
    $("ul#storedItemsli").remove();
  });
});
/*
Theme Name: jqueryui-com
Template: jquery
*/
a,
.title{
  color:#B24926;
}

# content a:hover {
  color:#333;
}

# banner-secondary p.intro {
  padding:0;
  float:left;
  width: 50%;
}

# banner-secondary.download-box {
  border —1px solid#aa;
  background: #333;
  background: -webkit-linear-gradient (left, #3330%, #444 100%);
  background: linear-gradient (to right, #3330%, #444 100%);
  float:right;
  width: 40%;
  text-align:center;
  font-size: 20px;
  padding —10px;
  border-radius:5px;
  box-shadow: 0 0 8px rgba(0,0,0,0.8);
}

# banner-secondary.download-box h2 {
  color:#71D1FF;
  font-size: 26px;
}

# banner-secondary.download-box.button {
  float: none;
  display:block;
  margin-top —15px;
}

# banner-secondary.download-boxp{
  margin —15px05px;
}

# banner-secondary.download-option {
  width —45%;
  float:left;
  font-size: 16px;
}

# banner-secondary.download-legacy {
  float:right;
}

# banner-secondary.download-option span {
  display:block;
  font-size: 14px;
  color:#71D1FF;
}

# content.dev-links{
  float:right;
  width: 30%;
  margin: -15px-25px.5em1em;
  padding: 1em;
  border —1px solid#666;
  border-width —00 1px1px;
  border-radius —00 0 5px;
  box-shadow: -2px2px10px-2px#666;
}

# content.dev-linksul {
  margin:0;
}

# content.dev-linksli {
  padding:0;
  margin:.25em 0.25em1em;
  background-image: none;
}

.demo-list {
  float:right;
  width: 25%;
}

.demo-listh2{
  font-weight:normal;
  margin-bottom:0;
}

# content.demo-listul {
  width: 100%;
  border-top —1px solid#cc;
  margin:0;
}

# content.demo-list li {
  border-bottom:1px solid#cc;
  margin:0;
  padding:0;
  background: #eee;
}

# content.demo-list.active{
  background: #ffff;
}

# content.demo-lista {
  text-decoration: none;
  display:block;
  font-weight:bold;
  font-size: 13px;
  color:#3f3f3f;
  text-shadow —1px1px#ff;
  padding: 2% 4%;
}

.demo-frame{
  width: 70%;
  height —350px;
}

.view-source a{
  cursor —pointer;
}

.view-source>div{
  overflow — hidden;
  display: none;
}

@media all and (max-width:600px) {
  # banner-secondary p.intro, # banner-secondary.download-box {
    float: none;
    width —auto;
  }
  # banner-secondary.download-box {
    overflow —auto;
  }
}

@media only screen and (max-width:480px) {
  # content.dev-links{
    width —55%;
    margin: -15px-29px.5em1em;
    overflow — hidden;
  }
}

# gallery {
  float:left;
  width: 65%;
  min-height: 12em;
}

.gallery.custom-state-active{
  background: #eee;
}

.gallery li{
  float:left;
  width —96px;
  padding: 0.4em;
  margin —00 0.4em 0.4em 0;
  text-align:center;
}

.gallery lih5{
  margin —000.4em;
  cursor:move;
}

.gallery area {
  float:right;
}

.gallery lia.ui-icon-zoomin {
  float:left;
}

.gallery liimg {
  width: 100%;
  cursor:move;
}

#trash{
  float:right;
  width: 32%;
  min-height: 18em;
  padding: 1%;
}

#trashh4{
  line-height —16px;
  margin —000.4em;
}

#trashh4.ui-icon{
  float:left;
}

#trash.gallery h5{
  display: none;
}
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class="ui-widgetui-helper-clearfix">
  <ulid="gallery" class="galleryui-helper-resetui-helper-clearfix">
    <lic class="ui-widget-contentui-corner-tr">
      <h5class="ui-wideget-header" value="3">High Tatras</h5>
      <img src="https://jqueryui.com/resources/demos/droppable/images/high_tatras_min.jpg" alt="The peaks of High Tatras" width="96" height="72">
      <a href="https://jqueryui.com/resources/demos/droppable/images/high_tatras.jpg" title="View large image" class="ui-iconui-icon-zoomin">View large</a>
      <a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-iconui-icon-trash">Delete image</a>
    </li>
    <lic class="ui-widget-contentui-corner-tr">
      <h5class="ui-wideget-header" value="2">High Tatras2</h5>
      <img src="https://jqueryui.com/resources/demos/droppable/images/high_tatras2_min.jpg" alt="The chalet at the Green mountain lake" width="96" height="72">
      <a href="https://jqueryui.com/resources/demos/droppable/images/high_tatras2.jpg" title="View large image" class="ui-iconui-icon-zoomin">View large</a>
      <a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-iconui-icon-trash">Delete image</a>
    </li>
    <lic class="ui-widget-contentui-corner-tr">
      <h5class="ui-wideget-header" value="8">High Tatras 3</h5>
      <img src="https://jqueryui.com/resources/demos/droppable/images/high_tatras3_min.jpg" alt="Planning the ascent" width="96" height="72">
      <a href="https://jqueryui.com/resources/demos/droppable/images/high_tatras3.jpg" title="View large image" class="ui-iconui-icon-zoomin">View large</a>
      <a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-iconui-icon-trash">Delete image</a>
    </li>
    <lic class="ui-widget-contentui-corner-tr">
      <h5class="ui-wideget-header value="5">High Tatras 4</h5>
      <img src="https://jqueryui.com/resources/demos/droppable/images/high_tatras4_min.jpg" alt="On top of Kozikopka" width="96" height="72">
      <a href="https://jqueryui.com/resources/demos/droppable/images/high_tatras4.jpg" title="View large image" class="ui-iconui-icon-zoomin">View large</a>
      <a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-iconui-icon-trash">Delete image</a>
    </li>
  </ul>
  <divid="trash" class="ui-wide-contentui-state-default">
    <h4class="ui-wideget-header">
      Drop Items: <span id="items">0</span>
      <!---<span class="ui-iconui-icon-trash"></span>Trash-->
    </h4>
  </div>
  <button type="button" id="save">Save</button>
  <button type="button" id="clear">Clear</button>
  <p> Stored Items</p>
  <ulid="storedItems">
  </ul>
</div>
//Save to Click　　at the same time goes
$("button#save").click(function(){
  variables = $("liimg", $("ul", $trash));
  for (vari=0,len=items.length;i<len;i++){
      localStorage.setItem(i,$(items[i]).attr("src"));
  }

  // verify that it has been saved
  for (vari=0,len=localStorage.length;i<len;i++){
    $("ul#storedItems").append("<li>"+i+":"+localStorage.getItem(i)));
  }
});

This will be saved without any problems, but I would like to save the value in the tag at the same time.
Thank you for your cooperation.

javascript jquery jquery-ui

2022-09-30 20:48

1 Answers

You can use JSON.stringify() to store multiple values with one key in localStorage.
Also, use JSON.parse() when retrieving.

function set(){
  var object = {
    title: "Title",
    value: "Value"
  }
  // Convert to JSON string and save
  localStorage.setItem("data", JSON.stringify(object)));
}

function get() {
  // Return to object to retrieve
  var object = JSON.parse(localStorage.getItem("data");
  object.title;
  object.value;
}

2022-09-30 20:48

If you have any answers or tips

Popular Tags
python x 4647
android x 1593
java x 1494
javascript x 1427
c x 927
c++ x 878
ruby-on-rails x 696
php x 692
python3 x 685
html x 656
Popular Questions

610 GDB gets version error when attempting to debug with the Presense SDK (IDE)

581 PHP ssh2_scp_send fails to send files as intended

1022 In Java servlet, when SHA-256 sends WW-Authenticate header for digest authentication, the client does not return the result.

881 /usr/bin/google-chrome:symbol lookup error:/usr/bin/google-chrome: undefined symbol:gbm_bo_get_modifier

578 Understanding How to Configure Google API Key

© 2024 OneMinuteCode. All rights reserved.