HTML5新方法:前端存储localStorage的使用总汇

时间: 2017-12-26阅读: 2092标签: 存储

localStorage是什么?

html5中有一个localStorage的新特性,它主要用于本地存储使用,目的是为了解决了cookie存储空间小的问题(cookie中每条cookie的存储空间为4k),而localStorage一般在浏览器上支持的是5M大小(跟浏览器厂商有关系)。


localStorage特点

1.目前所有的浏览器中都会把localStorage的值类型限定为string类型,这个在对我们日常比较常见的jsON对象类型需要一些转换

2.localStorage在浏览器的隐私模式下面是不可读取的

3.localStorage本质上是对字符串的读取,如果存储内容多的话会消耗内存空间,会导致页面变卡

4.localStorage不能被爬虫抓取到

5生命周期:localStorage属于永久性存储,而sessionStorage属于当会话结束的时候,sessionStorage中的键值对会被清空。(这也是localStorage与sessionStorage的唯一一点区别)

6当本页操作(新增、修改、删除)了localStorage的时候,本页面不会触发storage事件,但是别的页面会触发storage事件


localStorage的兼容


可以看出localStorage的兼容性还是不错的,就国内的情况,已经基本没有问题了。还在用IE8以下的如果非要兼容,我们可以使用要UserData来作为存储,这里不做讲解,有兴趣的朋友可以去百度一下。


localStorage的使用

在首次使用localStorage的时候,我们一般需要去判断浏览器是否支持localStorage这个属性

if(window.localStorage){
    //支持localstorage
}else{
    console.log("浏览器不支持localstorage");
    return;
}


设置

localStorage.setItem('username','cfangxu');


获取

localStorage.getItem('username') 
//也可以获取键名 
localStorage.key(0) //获取第一个键名


删除

localStorage.remove('username') 
//也可以一次性清除所有存储 
localStorage.clear()


storage事件

当storage发生改变的时候触发。 
注意: 当前页面对storage的操作会触发其他页面的storage事件 
事件的回调函数中有一个参数event,是一个StorageEvent对象,提供了一些实用的属性,如下表:

PropertyTypeDescription
keyStringThe named key that was added, removed, or moddified
oldValueAnyThe previous value(now overwritten), or null if a new item was added
newValueAnyThe new value, or null if an item was added
url/uriStringThe page that called the method that triggered this change
站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/280

关闭

本地化存储Storage

Web storage的目的是克服由cookie带来的限制,当数据需要严格控制在客户端上时,无须持续将数据发回服务器。主要是提供一种在cookie之外存储会话数据的途径和提供一种可以大量跨会话存在的数据机制

在前后端分离的项目中,ajax跨域请求怎样附带cookie

后台保存用户信息通常使用的session和cookie结合的方法,而在前端的实际情况中,跨域产生的ajax是无法携带cookie信息的,这样导致了session和cookie的用户信息储存模式受到影响,该怎样去解决这样一个问题呢

Cookie、Session与Token

Cookie是一个http请求首部,当服务端响应头上标记着setCookie时,可以设置此cookie到当前域名下;session实际上是一种概念,表示每次会话服务器存储的用户信息

关于网页本地存储的一些思考

localStorage 与 sessionStorage具体适用于什么样的业务场景?如何维护本地储存?如何进行版本控制?碰到禁止本地缓存的情况下怎么解决这个问题?

Cookie防篡改机制_cookie怎么防止被篡改/伪造

因为Cookie是存储在客户端,用户可以随意修改。所以存在一定的安全隐患,服务器为每个Cookie项生成签名。如果用户篡改Cookie,则与签名无法对应上。以此,来判断数据是否被篡改。

HTML5中的storage 如何使用

HTML5中,我们常常用到storage,那这个storage到底是什么?有啥用呢?其实,storage是个很简单的东西,只要熟悉JavaScript中对象的童鞋,看完小编本文的分享

ES6封装H5本地存储localStorage、sessionStorage

localStorage: 方法存储的数据没有时间限制。sessionStorage: 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除。

Web 存储技术

第一个Web存储的技术叫做Cookie,它是网站的身份证。是网站为了辨别用户身份,进行session(服务端的session)跟踪而存储在用户本地终端上的数据,也就是说它是存在电脑硬盘上的,一个很小的txt类型的文件

HTTP缓存和浏览器的本地存储

http请求做为影响前端性能极为重要的一环,因为请求受网络影响很大,如果网络很慢的情况下,页面很可能会空白很久。对于首次进入网站的用户可能要通过优化接口性能和接口数量来解决。但是,对于重复进入页面的用户,除了浏览器缓存

JS中原始值和引用值的储存方式

在ECMAscript中,变量可以存放两种类型的值,即原始值和引用值。原始变量及他们的值储存在栈中,当把一个原始变量传递给另一个原始变量时,是把一个栈房间的东西复制到另一个栈房间,且这两个原始变量互不影响。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!