JavaScript实现本地数据简单存取以及Json数据存取

心已赠人 2021-11-13 23:06 413阅读 0赞

1.判断本地存储是否可用：

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div></td> 
   <td> 
    <div> 
     <div> 
      <code>if</code> 
      <code>(window.localStorage) {&nbsp; </code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>// localStorge可用&nbsp; </code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>}</code> 
      <code>else</code> 
      <code>{&nbsp; </code> 
     </div> 
     <div> 
      <code>// localStorge不可用&nbsp; </code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>}&nbsp; </code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

2.存储数据：

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div></td> 
   <td> 
    <div> 
     <div> 
      <code>// 获取本地存储对象&nbsp; </code> 
     </div> 
     <div> 
      <code>var</code> 
      <code>localStorage =window.localStorage;&nbsp; </code> 
     </div> 
     <div> 
      <code>// 存储&nbsp; </code> 
     </div> 
     <div> 
      <code>localStorage.setItem(</code> 
      <code>"key"</code> 
      <code>,content);&nbsp; </code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

3.取出数据

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div></td> 
   <td> 
    <div> 
     <div> 
      <code>var</code> 
      <code>myKey =localStorage.getItem(</code> 
      <code>"key"</code> 
      <code>);&nbsp; </code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

4.删除指定数据

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div></td> 
   <td> 
    <div> 
     <div> 
      <code>localStorage.removeItem(</code> 
      <code>"key"</code> 
      <code>);&nbsp; </code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

5.清空本地数据

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div></td> 
   <td> 
    <div> 
     <div> 
      <code>localStorage.clear();&nbsp; </code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

6.存储与读取json数据

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div> 
    <div>
      12 
    </div></td> 
   <td> 
    <div> 
     <div> 
      <code>// 定义json变量&nbsp; </code> 
     </div> 
     <div> 
      <code>var</code> 
      <code>json ={username:</code> 
      <code>"杨朝来"</code> 
      <code>,sex:1,age:25,birthday:</code> 
      <code>"1990-08-21"</code> 
      <code>,phonenumber:13812345678,disease:</code> 
      <code>"肺小结节"</code> 
      <code>,insurance:1,avatar:</code> 
      <code>"images/male.png"</code> 
      <code>};&nbsp; </code> 
     </div> 
     <div> 
      <code>// json变量转化成json字符串&nbsp; </code> 
     </div> 
     <div> 
      <code>var</code> 
      <code>jsonstr =JSON.stringify(json);&nbsp; </code> 
     </div> 
     <div> 
      <code>// 存储json字符串&nbsp; </code> 
     </div> 
     <div> 
      <code>window.localStorage.setItem(</code> 
      <code>"jsonkey"</code> 
      <code>,jsonstr);&nbsp; </code> 
     </div> 
     <div> 
      <code>// 取出json字符串&nbsp; </code> 
     </div> 
     <div> 
      <code>var</code> 
      <code>jsonstr =window.localStorage.getItem(</code> 
      <code>"jsonkey"</code> 
      <code>);&nbsp; </code> 
     </div> 
     <div> 
      <code>// 还原json对象&nbsp; </code> 
     </div> 
     <div> 
      <code>var</code> 
      <code>json =JSON.parse(jsonstr);&nbsp; </code> 
     </div> 
     <div> 
      <code>// 取出json里面的username&nbsp; </code> 
     </div> 
     <div> 
      <code>var</code> 
      <code>username =json.username;&nbsp; </code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>