首页 > 其他分享> 文章详细

localStorage本地存储技术

2019-12-20 14:01:25 阅读：257 来源： 互联网

标签：info 存储 console 本地存储技术 localStorage key log

localStorage 本地存储技术

本地存储技术，“不是永久的永久存储”

特点：

　　　　将数据存储到浏览器当中

　　　　存储的数据都是以字符串的形式存储的

和传统的数据库相比：

　　　　优点：

　　　　　　操作简单，容易学习

　　　　　　数据直观，以最常见的key:value的形式进行存储

　　　　　　数据默认只可以在同源的状态下查看和存储

window.localStorage 意味着storage这项技术依赖于浏览器。

本地存储技术是属于window对象的顶层对象可以省略不写

本地存储和cookie的区别：

就是加强版的cookie，更加的安全，同源的状态下才能查看存储的数据，存取文件更加的安全

本地存储的基础的api：

　　setItem('key','value')

　　getItem('key','value')

　　removeItem('key')

　　clear()

　　.length 获取长度值

 1     // 存储
 2      localStorage.setItem('name','admin');
 3      localStorage.setItem('test',true);
 4 
 5     // 获取  
 6     let info = localStorage.getItem('test');
 7          console.log(info);
 8 
 9     let info = localStorage.removeItem('test')
10      console.log(info); 
11 
12     console.log(localStorage.getItem('name')); // 如果查不到内容，返回null.如果存在，返回key对应的value
13 
14     // 获取长度 
15      console.log(localStorage.length)
16     // 清空
17     let info = localStorage.clear();
18     console.log(info)
19

本地存储的API

1.保存数据到本地

const info ={
        name:'dongdong',
        age:"23",
        id:"007"
    };
    localStorage.setItem('key',JSON.stringify(info))；

2.从本地存储拿到数据

var data =JSON.parse(localStorage.getItem('key'))
     console.log(data);

3.本地存储中删除某个保存的数据

localStorage.removeItem('key');//删除了key值为key的那条数据

4.删除所有保存的数据

localStorage.clear()//删除所有保存的数据

5.监听本地存储的变化

Storage 发生变化（增加、更新、删除）时触发，同一个页面发生的改变不会触发，之会监听同一个域名下面其他页面改变Storage

window.addEventListener('storage',function(e){
         console.log("key",e.key);
         console.log("oldValue",e.oldValue);
         console.log("newValue",e.newValue);
         console.log("url",e.url);
     })

标签：info,存储,console,本地,存储技术,localStorage,key,log
来源： https://www.cnblogs.com/dongdong1996/p/12000583.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

localStorage本地存储技术