`
张闯闯1994
  • 浏览: 19820 次
  • 性别: Icon_minigender_1
  • 来自: 石家庄
社区版块
存档分类
最新评论

本地存储

web 
阅读更多

      随着WEB应用的快速发展,本地存储一些数据也成为一种重要的需求,实现的方案也有很多,最普通的就是cookie了,但是cookie的缺点是显而易见的,可能被用户禁用,在IE7+和firefox上,每个域最多只能保存50个Cookie,每个Cookie大小不超过4KB(有兴趣可以去浏览笔者博客“浅谈Cookie”);因此,Web Storage就显得更加实用。

sessionStorage与localStorage

     Web Storage实际上由两部分组成:sessionStorage与localStorage。

sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。

      localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。

      存储数据的方法就是直接给window.localStorage添加一个属性,例如:window.localStorage.a 或者 window.localStorage["a"]。

localStorage.num=5;设置num为“5”;
localStorage["str"]="happy";设置str为“happy”;

确定浏览器支持localStorage后,我们就可以使用它的接口了,localStorage的使用方法很简单,在chrome的控制台里面打印一下localStorage,就能列出它的全部方法,我相信很多人一看就能明白了。

我们主要用到的

    length:本地存储数据的个数;

    setItem(key,value):向key字段写入value数据;

    getItem(key):去key字段的数据;

    removeItem(key):移除key字段;

    clear():清空该域下的所有数据;

    key(i):获取第i个数据的key;

    需要注意的是,HTML5本地存储只能存字符串,任何格式存储的时候都会被自动转为字符串,所以在存和读取的时候,需要自己进行类型的转换,最常用的是调用JSON.stringify()将其转为字符串,调用JSON.parse()将字符串转为json格式,如下:

var current_item={sort: "饮料",name: "可口可乐", price: "3", unit: "瓶",count:0};  
localStorage.setItem("user",JSON.stringify(current_item)); //往本地存 current_item这个对象  
var cartInfo=JSON.parse(localStorage.getItem("user"));//从本地取出 current_item这个对象 

   以上就是,笔者对本地存储的一些简单理解,仅供参考。

分享到:
评论

相关推荐

    原生JS实现购物车本地存储

    利用原生js和本地存储技术实现购物车功能

    Cloudreve云盘源码,支持本地储存和对接各大对象储存

    loudreve云盘源码,支持本地储存和对接各大对象储存,界面 美观 测试环境:PHP7.1 + MYSQL5.6 + Apache 上传源码到根目录 安装程序: 浏览器数据 http://localhost/CloudreveInstallerlocalhost更换成你的网 址 安装...

    HTML本地存储实例

    HTML本地存储,特别是HTML5中的localStorage和Web数据库(Database)技术,是现代Web应用中用于在客户端存储数据的重要工具。这些技术使得开发者可以将部分数据存储在用户的浏览器中,从而提高应用程序的性能,减少...

    云平台企业级部署方案-案例3-本地存储.docx

    云平台企业级部署方案 - 案例 3 - 本地存储 云平台企业级部署方案是指企业级别的云计算平台的部署解决方案,该方案旨在提供一个可靠、可扩展、灵活的云计算环境,满足企业级别的业务需求。本地存储是云平台企业级...

    WindowsXP系统不能加载本地储存的配置文件.docx

    当遇到“Windows 不能加载本地存储的配置文件”的错误时,可以按照以下步骤进行解决: 1. **打开系统属性**:右键点击“我的电脑”图标,选择“属性”来进入系统属性设置。 2. **选择“高级”选项卡**:在弹出的...

    本地存储javascript类库

    在IT行业中,本地存储是Web应用中不可或缺的一部分,特别是在JavaScript环境下。传统的Cookie技术由于其大小限制和性能问题,已经无法满足现代Web应用的需求。本文将深入探讨“本地存储javascript类库”的概念,以及...

    Outlook设置本地存储的方法

    ### Outlook设置本地存储的方法 #### 一、创建本地备份(.pst)文件 在Outlook中,为了确保邮件不会因为邮箱容量限制而无法接收或发送,我们可以通过创建本地备份(.pst)文件的方式来进行邮件的存档和管理。下面...

    大数据本地存储

    本地存储 session 大数据本地存储 cookie

    支持设置过期时间的本地存储localstorage

    标题“支持设置过期时间的本地存储localStorage”指出了一种改进的本地存储方法,即在使用`localStorage`时加入过期时间的概念。这将帮助我们更好地控制存储在客户端的数据,避免因数据过期而引发的问题,同时减少...

    html5-本地存储

    本地存储不仅提高了网站的性能,还为开发者提供了更多可能性来创建丰富的Web应用。 #### 二、本地存储与Cookie的区别 1. **存储容量**:本地存储提供更大的存储空间,默认为5MB,而Cookie的大小限制通常为4KB。 2....

    【PC】解决Windows不能加载本地存储的配置文件

    "解决Windows不能加载本地存储的配置文件" Windows操作系统在用户登录过程中,可能会出现无法加载本地存储的配置文件的错误信息。这种错误可能是由于安全权限不足或本地配置文件损坏所导致的。解决这个问题的方法是...

    本地存储小型文件ios

    本地存储小型文件 沙盒路径 以及 文件的存储

    js 登陆 本地储存 留言板评论

    本文将深入探讨JavaScript在登录、本地存储、留言板评论、提示信息以及表单验证等关键功能中的应用。 首先,JavaScript用于实现用户登录功能。在网页中,JavaScript可以处理登录表单的事件监听,比如点击登录按钮时...

    Vue2.0 V1.1版本 增删改查功能,全选单选与取消全选选项,使用localStorage本地存储数据和watch深度监听

    Vue2.0 V1.0的增删改查功 全选单选与取消全选选项, 使用了localStorage本地存储数据和watch深度监听数据选项变化。TodoList完善版。 用于学习的小Demo. TodoList 传值学习,父传子 子传孙 子传父 传值等学习,全选...

    兼容个浏览器的本地存储

    兼容个浏览器的本地存储,支持html5的使用storage,不支持的使用userData

    HTML5的本地存储

    本地存储主要包括两个API:`localStorage` 和 `sessionStorage`。 #### 二、`localStorage` `localStorage` 是HTML5本地存储机制的一部分,用于长期保存数据。这些数据即使在用户关闭浏览器后仍然保留,并且只有...

    用于与Vue的本地存储交互的Reactive层

    在Vue.js应用中,本地存储(Local Storage或Session Storage)是一种常见的数据持久化方式,它允许我们在用户浏览器中保存数据,即使用户关闭了页面或浏览器,这些数据也能被保留下来。"用于与Vue的本地存储交互的...

    sessionStorage本地存储数据实例

    在Web开发中,本地存储是浏览器提供的一种机制,允许开发者在用户的浏览器中持久化存储数据。其中,`sessionStorage` 是一种重要的本地存储方式,它主要用于在同一个浏览器窗口或标签页内存储用户会话期间的数据。与...

    本地数据库储存

    本地数据库储存是指在用户的设备上,如个人计算机或移动设备(如MobilePhone)上存储数据的一种方式。这种方式允许用户离线访问数据,提高数据处理速度,并且保护数据隐私,因为数据不必总是通过网络传输。下面将...

Global site tag (gtag.js) - Google Analytics