localStorge在react中的使用

1.什么时候用，在哪里用

刚获取数据的时候，进行设置，localStorge.setItem(key,value);因为localStorge是用来作为缓存的，且有一定的延时，尤其是在本页面设置本页面使用时，所以，依然要创建本地的state，用来临时保存数据value。

2.使用的时候注意什么

（1）注意数据的复杂性，如果value是复杂数组，json等格式，localStorge.getItem(key)的时候,会出现输出结果是【Object,Object】，这个时候在存储之前先将数据转为字符串JSON.stringfy(value);使用的时候，使用JSON.parse（localStorge.getItem(key)）

  (2)  与state的联合使用，保证数据的实时刷新：

　　对第一手数据进行setState操作，并非对localStorge进行setState，state保存数据更为及时，且能被及时渲染，所以，在进行数据渲染时，可以借鉴我下面的代码：

　　大意就是：先判delBookLogs这个state，后判断localStorge，这样保证了两件事，第一：保证数据库新信息及时渲染，第二：保证当前页面刷新或者其他页面跳转数据丢失。

　　　　　　           -------如果它长度不是0，表示有数据，进行渲染，

　　　　　　　　    -------否则啥数据也没有，就问localStorge，

　　　　　　　　　　　　　　------如果它不是null，就渲染它

　　　　　　　　　　　　　　------否则就显示暂无数据

</div>
          {
            delBookLogs.length!==0 ? delBookLogs.map((delLogObj) => {
              return (
                <div className="oneLog" key={delLogObj.date}>
                  <div className="optionPerson"><span>{delLogObj.admin}</span></div>
                  <div className="bookName"><span>{delLogObj.bookName}</span></div>
                  <div className="author"><span>{delLogObj.author}</span></div>
                  <div className="date"><span>{delLogObj.date}</span></div>
                </div>
              )
            })
            :localStorage.getItem('delBookLogs') !== null ? JSON.parse(localStorage.getItem('delBookLogs')).map((delLogObj) => {
              return (
                <div className="oneLog" key={delLogObj.date}>
                  <div className="optionPerson"><span>{delLogObj.admin}</span></div>
                  <div className="bookName"><span>{delLogObj.bookName}</span></div>
                  <div className="author"><span>{delLogObj.author}</span></div>
                  <div className="date"><span>{delLogObj.date}</span></div>
                </div>
              )
            }) : <div>暂无数据</div>
          }
        </div>

 

搜索

复制