js的localStorage存储标签,localstorage获取数据
本文为您带来了一些关于javascript的知识，包括在JavaScript中使用localStorage来存储数据。本文中的示例代码非常详细，具有一定的参考价值，希望对你有所帮助。
【相关推荐：javascript视频教程，web前端】
背景
Js以前都是用Session和Cookie 来存储信息，好像我那时候还卡着。问同事有没有新的解决方案，才知道现在有HTML5 localStorage在本地存储这个东西，可以在浏览器端存储数据。
我记得最早的Cookies只能存储很小的东西，外观4KB，安全性很差。IE6时代，一个域名只能有20个Cookies，相当有限。当然IE还有userData，没用。Flash还带了一个存储，比较大，空间是Cookie的25倍左右。当时也是现在废弃了。
在H5时代，它是统一的，LocalStorage一统天下。官方推荐每个网站 5MB ，很大。虽然浏览器设置会有所不同，但一般来说，存储一些JSON或string或cache就足够了。
HTML5 LocalStorage 本地存储
sessionStorage：保存的数据用于浏览器的会话。当会话结束时(通常此窗口关闭)，数据被清除；localStorage：保存的数据长期存在。下次访问该网站时，网页可以直接读取之前保存的数据。这两个对象的属性和方法是完全一样的，只是存储周期的长短不同。它们非常类似于cookie机制的增强版本，尽管它们可以使用大得多的存储空间。但是，与cookie一样，它们也受到同一个域的限制。储存在网页中的数据只能由同一域中的网页读取。
通过检查窗口对象是否包含sessionStorage和localStorage属性，可以确定浏览器是否支持这两个对象。
功能检查存储支持()
{
//会话存储
if (window.sessionStorage) {
返回true
}否则{
返回false
}
//本地存储
if (window.localStorage) {
返回true
}否则{
返回false
}
}Storage 操作
sessionStorage和localStorage存储的数据采用“Key-Value键值对”的格式。换句话说，每个数据项都有一个键名和一个对应的值。所有数据都以文本格式保存。
//sessionStorage操作
sessionStorage.setItem(key ， value )；//setItem方法，用变量名键和值存储变量。
var value session=session storage . getitem( key )；//getItem方法读取名为key的存储变量的值。
session storage . remove item( key )；//removeItem方法删除变量名为key的存储变量。
session storage . clear()；//clear方法清除所有保存的数据。
//localStorage操作
localStorage.setItem(key ， value )；//用变量名键和值存储变量
localStorage.key=value //与存储数据的setItem方法相同。
var value local=local storage . getitem( key )；//读取存储变量key的值
var value local=local storage . key；//与getItem相同，读取数据
local storage . remove item( key )；//removeItem方法删除变量名为key的存储变量。
local storage . clear()；//clear方法清除所有保存的数据。
//使用length属性和key方法遍历所有数据。
for(var I=0；I本地存储.长度；我)
{
console . log(local storage . key(I))；
}
//以Json格式存储localStorage数据
value=JSON . stringify(JSON value)；//将JSON对象jsonValue转换为字符串
localStorage.setItem(key ，value)；//用localStorage保存转换后的字符串。
//读取localStorage中的Json格式数据
var value=local storage . getitem( key )；//检索值变量
JSON value=JSON . parse(value)；//将字符串转换为JSON对象Storage 事件
当存储的数据发生变化时，将触发存储事件。我们可以指定这个事件的回调函数。
window . addevent listener( storage ，onStorageChange)；回调函数接受一个事件对象作为参数。此事件对象的key属性保存更改后的键名。
函数onStorageChange(e)
{
console . log(e . key)；
}除了key属性，事件对象还有三个属性：
旧值：更新前的值。如果该键是新添加的，则该属性为null。NewValue:更新后的值。如果该项被删除，则该属性为null。Url:最初触发存储事件的网页的URL。特别是，在导致数据更改的当前页面上不会触发此事件。如果浏览器同时打开一个域名下的多个页面，当其中一个页面改变sessionstorage或localstorage的数据时，会触发其他所有页面的存储事件，但原页面不会触发存储事件。通过这种机制，可以实现多个窗口之间的通信。在所有浏览器中，除了IE浏览器，它会在所有页面上触发存储事件。
扩展知识
1.localStorage和sessionStorage是HTML5 Web storage提供的两种存储方式，IE7和大部分浏览器都支持。
2.localStorage和sessionStorage的区别：
(1)、localStorage和sessionStorage都是用来存储客户端临时信息的对象。
(2)都是只能存储字符串类型的对象(虽然规范中也可以存储其他原生类型的对象，但至今没有浏览器实现)。
(3)localStorage生命周期是永久的，这意味着除非用户清除浏览器提供的UI上的local storage信息，否则该信息将永久存在。(记录在内存中)
sessionStorage的生命周期是当前窗口或选项卡。一旦窗口或选项卡关闭，sessionStorage存储的所有数据将被清除(回调存储)。
(4)不同的浏览器不能共享localStorage或sessionStorage中的信息。同一浏览器的不同页面可以共享同一个localStorage(页面属于同一个域名和端口)，但是不同的页面或标签页不能共享sessionStorage的信息。
这里需要注意的是，页面和标签页仅指顶层窗口。如果一个选项卡包含多个iframe选项卡，并且它们属于同一个页面，则它们可以共享sessionStorage。(同源原则)
3.localStorage和sessionStorage可以存储的数据大小通常为5MB。
【相关推荐：javascript视频教程，web前端】以上是JavaScript使用localStorage存储数据的详细内容。更多请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。