Help with saving a JQuery Sortable Grid to a cookie.

Help with saving a JQuery Sortable Grid to a cookie.

I am new to jQuery, and coding in general. I have made a sortable grid that contains images with links that can be rearranged by dragging/dropping them, but i want the user to be able to save the order they have chosen. After refreshing the page the order returns back to normal, so i was wondering how the order could be saved , and retrieved from a cookie.

Here's my code so far:

<!doctype html>

  1. <html lang="en">


      <meta charset="utf-8">

      <meta name="viewport" content="width=device-width, initial-scale=1">

      <title>jQuery UI Sortable - Display as grid</title>

      <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

      <link rel="stylesheet" href="/resources/demos/style.css">

      <style>

      #sortable { list-style-type: none; margin: 0; padding: 0; width: screen.width; }

      #sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 100px; height: 90px; font-size: 4em; text-align: center; }

      </style>

      <script src="https://code.jquery.com/jquery-1.12.4.js"></script>

      <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js"></script>

      <script>

      $( function() {

      $('sortable').sortable({});

        $( "#sortable" ).sortable();

        $( "#sortable" ).disableSelection();

      } );

      </script>





     

    <ul id="sortable">


      <li id="item-1">

      <a href="http://www.google.ca">

      <img src="https://www.agentpestcontrol.net/wp-content/uploads/2016/07/icon_google-1-100x100.png"

      alt=""> </a>

      </li>

      

      <li id="item-2”>

      <a href="http://www.youtube.ca">

      <img src="https://static1.squarespace.com/static/574e6d1b2b8dde5e3e9b9e61/t/576734b5b8a79b23388635ff/1466381888970/YouTube"> </a>

      </li>

      

      <li id="item-3”>

      <a href="http://www.peelschools.org/Pages/default.aspx">

      <img src="  http://www.peelschools.org/parents/register/PublishingImages/reg-regyourchild.jpg"

      alt=""> </a>

      </li>

      

        <li id="item-4”>

      <a href="https://accounts.google.com/ServiceLogin?service=classroom&continue=https://classroom.google.com/&followup=https://classroom.google.com/&passive=true&go=true&emr=1">

      <img src="https://sites.google.com/site/edwitlib/_/rsrc/1474581019221/home/google%20classroom.png"

      alt=""> </a>

      </li>

      

        <li id="item-5”>

      <a href="https://www.desmos.com/calculator">

      <img src="  http://www.ipadvsoli.si/wp-content/uploads/2014/11/desmos_logo.png"

      alt=""> </a>

      </li>

      

          <li id="item-6”>

      <a href="https://www.icloud.com">

      <img src="https://www.blognone.com/sites/default/files/styles/thumbnail/public/topics-images/featured-content-icloud-icon_2x.png?itok=0_z89Gx5"

      alt=""> </a>

      </li>

      

          <li id="item-7”>

      <a href="https://accounts.google.com/ServiceLogin?service=wise&passive=1209600&continue=https://drive.google.com/drive/my-drive&followup=https://drive.google.com/drive/my-drive">

      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/da/Google_Drive_logo.png/100px-Google_Drive_logo.png"

      alt=""> </a>

      </li>

      

          <li id="item-8”>

      <a href="https://www.mathway.com/Algebra">

      <img src="https://www.commonsense.org/education/sites/default/files/styles/100x100/public/experience-media-file/mathway.png?itok=Pxw73pH3"

      alt=""> </a>

      </li>

      

            <li id="item-9”>

      <a href="https://accounts.google.com/ServiceLogin?service=mail&passive=true&rm=false&continue=https://mail.google.com/mail/&ss=1&scc=1&ltmpl=default&ltmplcache=2&emr=1&osid=1">

      <img src="https://applets.imgix.net/https%3A%2F%2Fassets.ifttt.com%2Fimages%2Fchannels%2F33%2Ficons%2Fon_color_large.png%3Fversion%3D0?ixlib=rails-2.1.3&w=100&h=100&auto=compress&s=85ba0fac09ef5978203da10c7513cc39"

      alt=""> </a>

      </li>

      

          <li id="item-10”>

      <a href="http://schools.peelschools.org/sec/rickhansen/Pages/default.aspx">

      <img src="http://file2.answcdn.com/answ-cld/image/upload/w_200,h_200,c_fill,g_face:center,q_60/v1401250991/kdndmkvvunmmjm4mgtw6.png"style="max-height: 100px; max-width: 100px;"

      alt=""> 

    </a>

      </li>

      

            <li id="item-11”>

      <a href="https://translate.google.ca">

      <img src="https://screenshots.en.sftcdn.net/en/scrn/315000/315520/google-translate-550c411fc8f42-100x100.png"

      alt=""> </a>

      </li>

      

          <li id="item-12”>

      <a href="https://www.google.ca/maps/@43.600998,-79.6838765,15z">

      <img src="http://www.agenciainformativaudem.com/wp-content/uploads/2015/10/new-google-maps-logo-107x107.png"

      alt=""> </a>

      </li>

      

            <li id="item-13”>

      <a href="http://www.dictionary.com">

      <img src="https://media.licdn.com/mpr/mpr/shrinknp_100_100/AAEAAQAAAAAAAAWmAAAAJDhjYWExNDY1LTQxMjMtNDM0NC04MmU1LTc2ZDNlODUzMjEyNA.png"

      alt=""> </a>

      </li>

      

            <li id="item-14”>

      <a href="http://www.thesaurus.com">

      <img src="https://yt3.ggpht.com/-w_pcRjJV_xc/AAAAAAAAAAI/AAAAAAAAAAA/BfWkP_lHKag/s100-c-k-no-mo-rj-c0xffffff/photo.jpg"

      alt=""> </a>

      </li>

      

            <li id="item-15”>

      <a href="http://www.onelook.com/reverse-dictionary.shtml">

      <img src="https://assets.materialup.com/uploads/239808bd-7d26-410b-96e0-7258e19dd2b5/j1sfzwBAFM-Oi_m_SC2tpK7NmtF6S8HPNptYdKmhzCKGMNDkTzUzYGIfN-xNyyhm1sY=w300"style="max-height: 100px; max-width: 100px;"

      alt=""> </a>

      </li>

      

            <li id="item-16”>

      <a href="http://www.zamzar.com">

      <img src="http://i.utdstc.com/icons/120/zamzar.png"style="max-height: 100px; max-width: 100px;"

      alt=""> </a>

      </li>

      

              <li id="item-17”>

      <a href="https://fed.pdsb.org/adfs/ls?wa=wsignin1.0&wtrealm=urn%3apdsb%3asharepoint&wctx=https%3a%2f%2fbyod.peelschools.org%2f_layouts%2fAuthenticate.aspx%3fSource%3d%252F">

      <img src="http://followads.com/wp-content/uploads/2016/03/images-100x100.png"

      alt=""> </a>

      </li>

      

              <li id="item-18”>

      <a href="http://www.derivative-calculator.net">

      <img src="http://lh4.ggpht.com/5utZtqoOSGkW8V3Ak4vFIedjP61IeBcuWY3gCdMrlEmtyj82K53gmRbZ_5zWAHYGm-tn=w100"

      alt=""> </a>

      </li>

      

                <li id="item-19”>

      <a href="https://accounts.google.com/ServiceLogin?service=wise&passive=1209600&continue=https://docs.google.com/document/?usp%3Dmkt_docs&followup=https://docs.google.com/document/?usp%3Dmkt_docs&ltmpl=docs">

      <img src="https://sites.google.com/a/tdsb.on.ca/tdsbtechnology/_/rsrc/1399050000093/google-drive/google_docs.png?height=100&width=100"

      alt=""> </a>

      </li>

      

                <li id="item-20”>

      <a href="https://accounts.google.com/ServiceLogin?service=wise&passive=1209600&continue=https://docs.google.com/spreadsheets/?usp%3Dmkt_sheets&followup=https://docs.google.com/spreadsheets/?usp%3Dmkt_sheets&ltmpl=sheets">

      <img src="https://screenshots.en.sftcdn.net/en/scrn/69682000/69682746/google-sheets-05-100x100.png"

      alt=""> </a>

      </li>

      

                  <li id="item-21”>

      <a href="https://accounts.google.com/ServiceLogin?service=wise&passive=1209600&continue=https://docs.google.com/presentation/?usp%3Dmkt_slides&followup=https://docs.google.com/presentation/?usp%3Dmkt_slides&ltmpl=slides">

      <img src="http://c9.la2.download.9appsinstall.com:7080/group1/M02/D5/B4/qIYBAFh0H5-ATFaZAAAJBhttCx0627.png"

      alt=""> </a>

      </li>

      

                  <li id="item-22”>

      <a href="https://scholar.google.ca">

      <img src="https://researcholic.files.wordpress.com/2015/03/my-google-scholar.jpg"

      alt=""> </a>

      </li>

      

                    <li id="item-23”>

      <a href="https://sites.google.com/khalsa.com/essayhelper">

      <img src="http://c4.la2.download.9appsinstall.com:7080/group1/M02/A0/52/qIYBAFhA7XaAYwQ-AAAEcGeEUHI936.png"

      alt=""> </a>

      </li>

      

                    <li id="item-24”>

      <a href="https://www.facebook.com">

      <img src="https://media.licdn.com/mpr/mpr/shrink_100_100/AAEAAQAAAAAAAAYRAAAAJDVlMzBlYjNiLTAxN2QtNGQxZC1iZTAzLTlmNWQ1OTE4OGY4ZA.png"

      alt=""> </a>

      </li>

      

                      <li id="item-25”>

      <a href="http://turnitin.com">

      <img src="http://www.wiredprof.com/100/images/turnitin_logo.jpg"

      alt=""> </a>

      </li>

      

                        <li id="item-26”>

      <a href="https://myblueprint.cahttps://myblueprint.ca">

      <img src="http://cannexus.ca/wp-content/uploads/2017/01/blueprint.png"

      alt=""> </a>

      </li>

      


    </ul>

    <button id="save">Save</button>