js/jq本地存储的基本思路

目录

（一）类型转换

（二）获取本地存储

（三）获取到的本地存储对象转换为JSON字符串格式

（四）渲染

完整思路

---

本地存储是大多数js/jq作品需要有的功能

它的步骤

（一）类型转换

先了解JSON：

JSON 英文全称 JavaScript Object Notation，JSON 是一种轻量级的数据交换格式。

JSON 使用 JavaScript 语法，但是 JSON 格式仅仅是一个文本。文本可以被任何编程语言读取及作为数据格式传递。

JSON 是 JS 对象的字符串表示法。它使用文本表示一个 JS 对象的信息，（JSON）本质是一个字符串。

其实我们只需要了解与JSON有关的两个函数就行了

(1) JSON.parse()

     用于将一个 JSON 字符串转换为 JavaScript 对象。

(2) JSON.stringify()

     用于将 JavaScript 值转换为 JSON 字符串。

 function getData() {
        return JSON.parse(localStorage.getItem("catList")) || [];
    }

    function setData(data) {
        return localStorage.setItem("catList", JSON.stringify(data))
    }

（二）获取本地存储

接下来在写正文，也就是你所有的功能的时候，你的新内容都要以对象的方式存入本地存储的数组中

开启一段新的功能

首先要先获取到本地存储

定义一个变量来接收

  var local = getData();

将你的对象加入到本地存储数组中

上面这个local在整个程序中是可以改变名字的，它就好像一团越团越大的棉花。后续叫什么名字，它的内容都是你曾经存储过的对象数组

一般用push()方法，这种方法是向数组的末尾添加一个或多个元素，并返回新的长度

（三）获取到的本地存储对象转换为JSON字符串格式

在添加完之后将获取到新的对象的新数组转为JSON字符串，以便于以后的继续存储

 setData(local);

（四）渲染

其次最重要的就是 刷新也能渲染到页面（本地存储的最终目的）

凡是新添加的功能，最后都要写上渲染方法

渲染方法里面写要添加到页面上的内容（ps：里面的内容也需要存储到本地存储）

（ps2：在渲染方法的最后。可以加上一个判断本地存储是否为空的判断条件，防止在你主观删除一些东西后，本地存储数组变为undefined）。

         if (local.length === 0) {
                localStorage.clear();
            }

（ps3：在js开头获取到本地存储之后，一定要加上渲染方法，否则下面的都渲染不出来）

完整思路

$(document).ready(function () {
    const localData = getData()
    load(localData);
    function getData() {
        return JSON.parse(localStorage.getItem("catList")) || [];
    }

    function setData(data) {
        return localStorage.setItem("catList", JSON.stringify(data))
    }

    //功能
   function myFunction(){
        //获取本地
                var local = getData();

                local.push({
                   
                });
                setData(local);
              
                load(local);
        
    });
    
    //渲染功能
    function load(local) {
        //开始渲染

        //存储＋渲染
        setData(local);
        load(local);

     });
});