localStorage使用时需要注意的问题

一、localStorage，sessionStorage，cookie的简单介绍

localStorage:仅在客户端存储不参与服务器通信，存储大小一般为5M，如果不是人为清除，那么即使是关闭浏览器也会一直存在。

sessionStorage:仅在客户端存储不参与服务器通信，存储大小一般为5M，会话级存储，也就是说如果关闭当前页面或者浏览器那么就会清除

cookie:客户端存储，参与服务器通信，存储大小为4k,可设置生命周期，在设置的生命周期内有效

二、localStorage的优势及其注意点

在存储方面localstorage和sessionStorage具有巨大优势，大小为5M，比cookie大多了，所以可以用localStorage来做一些相对不太会改变的数据缓存或者说可以缓存用户的足迹，换个说法，localStorage是一个小型的数据库

注意点：

1、兼容性

2、localStorage的值为string类型

  
  

    
    

     
     

    
    
    
    

     
     

      
      if(！
      
      window.localStorage){
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
         alert(
      
      “浏览器支持”);
     
     
    
    

    
    

     
     

    
    
    
    

     
     
   
      
      return 
      
      false;
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      }
      
      else{
     
     
    
    

    
    

     
     

    
    
    
    

     
     
    
      
      var storage=
      
      window.localStorage;
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
          storage[
      
      “a”]=
      
      1;
      
      //第一种存储方式
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
          storage.b=
      
      2;    
      
      //第二种存储方式
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
          storage.setItem(
      
      “c”,
      
      3); 
      
      //第三种存储方式，推荐使用
     
     
    
    

    
    

     
     

    
    
    
    

     
     
    
      
      console.log(
      
      typeof storage[
      
      “a”]);
     
     
    
    

    
    

     
     

    
    
    
    

     
     
    
      
      console.log(
      
      typeof storage[
      
      “b”]);
     
     
    
    

    
    

     
     

    
    
    
    

     
     
    
      
      console.log(
      
      typeof storage[
      
      “c”]);
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      }
     
     
    
    
  
  

输出都为string类型，这就说明我们在使用的时候要进行类型转换

3、在浏览器隐私模式下不可读取

4、不同浏览器无法共享localStorage

不同浏览器无法共享localStorage,相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标 签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。

5、localStorage不能被爬虫获取

6、存储过多数据会导致页面变卡，因为localStorage的本质是对字符串的读取