欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

BOM之数据存储

程序员文章站 2023-10-27 08:52:46
JavaScript中本地存储数据常用的,且兼容性较好的有两种方式,cookie和Storage。另外还可以使用location.hash临时存储少量关键信息。 一 location.hash location.hash可以记录当前页面的状态,保存或分享当前页的url,再次打开该url时,网页还是保 ......

javascript中本地存储数据常用的,且兼容性较好的有两种方式,cookie和storage。另外还可以使用location.hash临时存储少量关键信息。

 

一    location.hash

  location.hash可以记录当前页面的状态,保存或分享当前页的url,再次打开该url时,网页还是保存(分享)时的状态。

       如果要使用location.hash来存储状态数据,那么我们首先应该了解url的大小限制。

       虽然http协议的rfc规范并没有详细规定url的最大字符长度限制,但实际上,在浏览器或者服务器中总会存在限制的。这里的字符是指ascii字符。

       一般建议浏览器最大值ie 2kb,chrome 8kb,firefox 64kb,safari 72kb,opera 192kb,注意这只是浏览器端的限制,实际使用还要根据不同的服务器端来做调整,例如apache 一般限制最大为8kb,nginx一般默认4kb等等。两者结合来看,我建议在开发中尽量把大小控制在2kb以内。

       location.hash的主要目的并不是为了存储数据,它更重要的功能是可以无刷新修改页面,配合ajax技术实现前端路由,虽然现在使用h5的history api逐渐替代了这种方式,但我们还是可以了解一下它的原理,因为它的兼容性更好。

  本篇主要讲解js的数据存储,关于前端路由以后再详细讲解。

 

二    document.cookie

       1,cookie用于在客户端本地临时保存用户少量信息。

       当用户打开一个网址时,浏览器可以把与该网址相关的少量用户信息存储在cookie中,当下一次用户再次打开相同网址时,浏览器会自动把cookie中存储的信息一起发送给服务器,这样服务器就能及时的返回和用户相关的信息。浏览器允许的cookie最大为4kb,不同浏览器同一域名下允许的cookie个数在20到50之间。

  2,读取cookie

  读取cookie会返回一个字符串,它以键值对的形式保存数据,每条数据用分号隔开。

1 console.log(document.cookie);//"username=ren;age=12"

  另外,每条cookie都有几个可选的键,用来设置/更新它自己,但在cookie中不能被显式的查看到

       path:规定cookie的路径,如果没有设置默认为当前文档的目录。

       domain:设置域名,如果没有则默认为当前页面域名。

       max-age:以秒来规定cookie的生存周期。

       expires:设置一个时间当做cookie的过期时间。基本可以用max-age替代。

       secure:通过设置一个boolean值来规定通过http还是https传输cookie,新的规定是cookie只能通过https传输,所以这个键基本没用了。

  3,添加cookie

       要添加新的cookie信息很简单:

1 document.cookie = "address=cd;max-age=360;path=/";

  cookie和普通变量不同,普通变量经过上面的操作,原来的值将被覆盖,而cookie则执行了类似 cookie += “some text”的操作。

  4,修改cookie

1 document.cookie = "address=sc;max-age=360;path=/”;

  修改时path必须和创建时一致,不然浏览器会新增一条cookie数据。

  5,删除cookie

       如果要在cookie生存周期内手动的删除cookie,只需要把xepires设置为以前的某一个时间即可:   

1 document.cookie = “address=sc;expires=thu,01 jan 1970 00:00:00 gmt;path=/”;

  需要注意的是,路径必须和创建这条cookie的路径一致,不然浏览器不会执行删除操作。

 

三    storage

  storage分为window.localstorage和window.sessionstorage。

  1,异同

  localstorage是没有时间限制的(除非用户手动清理)数据存储,存储在本地硬盘。而sessionstorage是针对一个 session(会话)的数据存储,网页关闭,数据将丢失,他们存储数据的大小可达5mb。不同浏览器可能存在差异。

  2,length

  localstorage对象有一个length属性,表示存储了几条数据。

  3,添加和修改数据

       localstorage是一个对象,所以他的修改方法同普通对象:

1 localstorage.name = "ren";//普通对象方式
2 localstorage.setitem("age",12);//localtstorage提供的方法
3 console.log(localstorage.name);//"ren"
4 console.log(localstorage.getitem(age));//"12"

  你可能会奇怪,localstorage.age为什么会返回字符串“12”,那是因为它只支持string类型的数据存储,所以系统在存储时会自动把数据转换成字符串。

  4,删除

       删除一项     

1 localstorage.removeitem(age);
2 console.log(localstorage);//{name:age,length:1}

       删除全部

1 localstorage.clear();
2 console.log(localstorage);//{length:0}