JS本地存储数据的几种方式

向右看齐 2021-09-15 03:10 330阅读 0赞

转自：https://blog.csdn.net/darrenzzb66/article/details/73012577

仅用于学习，违者必究！！！

1.Cookie   
这个恐怕是最常见也是用得最多的技术了，也是比较古老的技术了。COOKIE优点很多，使用起来很方便   
但它的缺点也很多：   
比如跨域访问问题；无法保存太大的数据（最大仅为4KB）；本地保存的数据会发送给服务器，浪费带宽 等等；

##### 代码如下 #####

2.使用sessionStorage、localStorage   
localStorage：   
是一种你不主动清除它，它会一直将存储数据存储在客户端的存储方式，即使你关闭了客户端（浏览器)，属于本地持久层储存   
sessionStorage：   
用于本地存储一个会话（session）中的数据，一旦会话关闭，那么数据会消失，比如刷新。   
有时候，我们需要将数据存储到sessionStorage和localStorage中，这样做的好处有：   
1 缓存数据   
2 减少对内存的占用   
但是，storage只能存储字符串的数据，对于JS中常用的数组或对象却不能直接存储。   
它能保存更大的数据（IE8上是10MB，Chrome是5MB），同时保存的数据不会再发送给服务器，避免带宽浪费。

localStorage存储方法（sessionStorage类似）   
localStorage.name =’vanida；   
localStorage\[“name”\]=’vanida’；   
localStorage.setItem(“name”,”vanida”);   
//这三种设置值方式是一样的；   
localStorage获取值方法   
var name = localStorage\[“name”\]   
var name= localStorage.name   
var name＝ localStorage.getItem(“name”);   
//这三种获取值方式是一样的；   
localStorage清除特定值方法   
//清除name的值   
localStorage.removeItem(“name”);   
localStorage.name＝”;   
localStorage清除所有值方法   
localStorage.clear()   
localStorage只能存储字符串，如果需要存储对象，首先要转化为字符串。利用JSON.stringify()；   
var person = \{name:”vanida”,”sex”:”girl”,”age”:25\};   
localStorage.setItem(“person”,JSON.stringify(person));   
// localStorage.person=”\{“name”:”vanida”,”sex”:”girl”,”age”:25\}”   
注意：JSON.stringify()中不要忘了“i”,stringify而不是stringfy！   
然后取出person的对象你可以用JSON.parse();   
person = JSON.parse(localStorage.getItem(“person”));

###### 下面是单个简单的对象（数组类似）存贮，不考虑其他的多个的情况 ######

var obj = { name:'Jim' }; 
    var str = JSON.stringify(obj); 
    
    //存入 
    sessionStorage.obj = str; 
    //读取 
    str = sessionStorage.obj; 
    //重新转换为对象 
    obj = JSON.parse(str);