本地化存储Storage

更新日期: 2019-09-21阅读: 2.1k标签: 存储

为什么会引入Storage(sessionStorage,localStorage,globalStorage)

Web storage的目的是克服由cookie带来的限制,当数据需要严格控制在客户端上时,无须持续将数据发回服务器。主要是提供一种在cookie之外存储会话数据的途径和提供一种可以大量跨会话存在的数据机制;sessionStorage 对象应该主要用于仅针对会话的小段数据的存储。如果需要跨越会话存储数据, 那么 localStorage 更为合适。


Storage介绍

对于 localStorage 而言,大多数桌面浏览器会设置每个来源 5MB 的限制。Chrome 和 Safari 对每 个来源的限制是 2.5MB。而 iOS 版 Safari 和 Android 版 WebKit 的限制也是 2.5MB。

对 sessionStorage 的限制也是因浏览器而异。有的浏览器对 sessionStorage 的大小没有限制, 但 Chrome、Safari、iOS 版 Safari 和 Android 版 WebKit 都有限制,也都是 2.5MB。IE8+和 Opera 对 sessionStorage 的限制是 5MB


sessionStorage介绍

sessionStorage对象存储特定某个会话的数据(绑定于某个服务器的会话),即该数据只保存到浏览器关闭(cookie也是会话级别); 存储在seesionStorage中的数据可以跨越页面刷新页面存在


localStorage介绍

要访问同一个localStoarge对象,页面必须来自同一个域名(子域名无效),使用同一种 协议,在同一个端口上。


Storage底层原理

sessionStorage:将数据保存在session对象中。所谓session,是指用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间,session对象可用来保存在这段时间内所要求保存的任何数据.

localStorage:将数据保存在客户端本地的硬件设备(磁盘文件)中,即使浏览器关闭了,该数据仍然存在,下次打开浏览器访问网站时仍然可用 永久保存,除非程序或人工删除,没有过期时间.


Storage的特点

(1)都会在浏览器端保存,有大小限制,同源限制; 

(2) sessionStorage在(会话级别)窗口关闭前有效;localStorage持久化的本地存储除非用户主动删除数据,否则数据是永远不会过期的; 

(3)sessionStorage不能共享,localStorage在同源文档之间共享;

 (4)对于localstorage而言,大多数桌面的浏览器都会设置来源5MB的限制,chorme和Safari对每个来源的限制是2.5MB;对于sessionStorage的限制也是因为浏览器而异,有的浏览器对sessionStage的大小是没有限制的,但chrome,safari都是2.5MB.

(5)只能存储字符串 (JSON.stringify() 对象-->字符串(JSON.parse() 字符串-->对象)




Storage的优点

相比 cookie ,Web Storage 的优点主要表现在存储空间更大,可存储的内容更大。cookie每次都随请求数据发送到服务器端,Web Storage不会和请求数据一同发送到服务器端,占用带宽更少


Storage的缺点

现在所有浏览器都支持 cookie 操作,而只有现在浏览器才支持 Web Storage 操作,如果需要兼容老旧浏览器,就不能使用 Web Storage。并且Storage只能存储字符串类型的数据 

 

Storage(localStorage和sessionStorage)的方法

clear();删除所有值;firefox中没有实现;
getItem(name);根据指定的名字name获取对应的值;
key(index):获取index位置处的值的名字;
removeItem(name):删除由name获取对应的值;
setItem(name,value);为指定name设置对应的value值;

sessionStorage.setItem("key", "value") ////使用方法存储数据
sessionStorage.book = "Professional JavaScript"; //使用属性存储数据 
var value = sessionStorage.getItem("key"); 
sessionStorage.removeItem("key")  // removeItem删除key
sessionStorage.clear()   // clear清除所有的key/value


Storage的应用

sessionStorage: 敏感账号一次性登录 localStorage: 长期登录、判断用户是否已登录、适合长期保存在本地的数据;

Web Storage 的特点,它主要被用于储存一些不经常改动的,不敏感的数据,比如全国省市区县信息。还可以存储一些不太重要的跟用户相关的数据,比如说用户的头像地址、主题颜色等,这些信息可以先存储在用户本地一份,便于快速呈现,等真正从服务器端读取成功后再更改头像地址,主题颜色。另外,基于 storage 事件特点,Web Storage 还可以用于同域不同窗口间的通信。


链接: https://www.fly63.com/article/detial/5442

js中cookie操作总结:cookie设置,读取,删除,判断是否存在

有时也用其复数形式 Cookies,指某些网站为了辨别用户身份,JavaScript对cookie的相关操作,设置cookie,读取cookie,删除cookie,判断cookie是否存在.......

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

在HTML5中有一个localStorage的新特性,它主要用于本地存储使用,目的是为了解决了cookie存储空间小的问题。本文将讲解:localStorage特点、localStorage的兼容、localStorage的使用等

Token ,Cookie和Session的区别

在做接口测试时,经常会碰到请求参数为token的类型,但是可能大部分测试人员对token,cookie,session的区别还是一知半解

介绍web开发中实现会话跟踪的常用技术方法

由于http是无状态的协议,这种特性严重阻碍了客户端与服务器进行动态交互,为了弥补http的不足,目前实现会话跟踪的常用技术方法:cookie、session、url重写、隐藏input、ip地址。

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

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

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

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

前端数据保存_使用js开发数据库

前端很多时候还是需要保存一些数据的,这里的保存指的是长久的保存。以前的思想是把数据保存在cookie中,或者将key保存在cookie中,将其他数据保存在服务器上。想要一种能够长久的保存在本地的数据,类似数据库或者类似web sql。

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

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

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

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

localStorage设置过期时间

我们都知道localStorage不主动删除,永远不会销毁,那么如何设置localStorage的过期时间呢?使用场景: 1.利用本地数据,减少网络传输 ,2.弱网络环境下,高延迟,低带宽,尽量把数据本地化

点击更多...

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