js存储数据到本地（javascript – localStorage 本地存储（新增、删除、修改）使用教程）

介绍

现在前端做数据存储            ，跨页面传值  
 
  
 
  
 
  
 
  
 
  
 
 ，localStorage是一个很好的方式












，以键值对的方式存储
  
  
  
  
  
  ，也方便取值赋值  
  
  
  
  
  
 ，下面说一说使用方法和一些常见的使用技巧            。

存值共有3种方式
 


 


 


 


 


 


，localStorage相当于window对象下面的一个属性
 
 
 
 
 
 ，所以有[]和.调用   
   
   
   
   
   
 ，但也具有自身的setItem方法

// 自身方法 localStorage.setItem("name","bonly"); // []方法 localStorage["name"]="bonly"; // .方法 localStorage.name="bonly";

取值也是如此
 

 

 

 

 

 

，自身的方法是getItem

// 自身方法 localStorage.getItem("name"); // []方法 localStorage["name"]; // .方法 localStorage.name;

改变的方式

 

 

 

 

 

 ，就是相当于给对应的key重新赋值             ，就会把原来的值覆盖掉

// 自身方法 localStorage.setItem("name","TOM"); // []方法 localStorage["name"]="TOM"; // .方法 localStorage.name="TOM";

移除某一个值
 
 

 
 

 
 

 
 

 
 

 
 

，可以通过对象删除属性的关键字delete也可以用自身的方法removeItem

// 自身方法 localStorage.removeItem("name"); // []方法 delete localStorage["name"]; // .方法 delete localStorage.name

获取所有的key

// 通过自身的key for (var i=0;i<localStorage.length;i++) { console.log(localStorage.key(i)); } // 通过for in 循环获取 for(var key in localStorage){ console.log(key); }

获取所有的值

localStorage.valueOf();//取出所有的值

清除所有的值

localStorage.clear()

判断是否具有某个key











，hasOwnProperty方法

localStorage.hasOwnProperty("name") // 如果存在的话返回true                   ，不存在返回false

使用技巧

先判断浏览器是否支持localStorage 
 
 
 
 
 
 
 
 
 
 
 
，通过if(!window.localStorage) return; 单词太长


















，不方便书写            ，可以利用 var storage=window.localStorage; 字符串和原始类型需要通过JSON.stringfy转字符串  
 
  
 
  
 
  
 
  
 
  
 
 ，通过JSON.parse转成对象 通过封装方法实现来回转化

注意事项

localStorage特定于页面的协议












，不是同一域名
  
  
  
  
  
  ，不能访问  
 
  
 
  
 
  
 
  
 
  
 
 。 有长度限制  
  
  
  
  
  
 ，5M左右
 


 


 


 


 


 


，不同浏览器大小会有不同












。 生命周期是永久的
 
 
 
 
 
 ，但是数据实际是存在浏览器的文件夹下   
   
   
   
   
   
 ，可能卸载浏览器就会删除
  
  
  
  
  
  。 浏览器可以设置是否可以访问数据
 

 

 

 

 

 

，如果设置不允许会访问失败  
  
  
  
  
  
 。 兼容IE8以上浏览器 只能存储字符串类型

 

 

 

 

 

 ，需要转成字符串存储
 


 


 


 


 


 


。